SfButton is an input that allows for user-triggered actions when clicked or pressed. This can be used for submitting forms, opening/closing dialogs, and much more.
Examples
Button sizes
SfButton supports 3 sizes that can be set with the size prop: 'sm', 'base', 'lg'.
This component can be used as a link (or any other tag) that can be set via the as prop.
import { SfButton } from '@storefront-ui/react';
import Link from 'next/link';
export default function ButtonAsLink() {
return (
<div className="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
<SfButton as="a" href="#">
Link
</SfButton>
<Link href="#" passHref legacyBehavior>
<SfButton as="a">NextLink</SfButton>
</Link>
</div>
);
}
Button block
You can create a full-width button with Tailwind's w-full class.
import { SfButton } from '@storefront-ui/react';
export default function ButtonBlock() {
return <SfButton className="w-full">Hello</SfButton>;
}
Button truncation
You can truncate button content with Tailwind using max-w- and truncate classes.
import { SfButton } from '@storefront-ui/react';
export default function ButtonTruncation() {
return (
<SfButton>
<span className="truncate max-w-[200px]"> Too long description for button </span>
</SfButton>
);
}
Button content
SfButton provides slotPrefix and slotSuffix props that you can use to add custom content before/after your default content. This can be useful for adding icons or badges to your buttons.
Button component can be rendered as <button> or <a> or any other tag by providing it with prop as. When rendered as <button> this component applies default type='button' if no other type is passed as a prop.
Avoid using buttons to navigate the page. Use links or tabs.
If you need to use Button with non-<button> tags like <div> you need to add role='button'. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user. You can override this behaviour by passing role prop by yourself.