Button

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'.

Button variants

SfButton supports 3 style variants that can be set via variant prop: 'primary', 'secondary', 'tertiary'.

This component can be used as a link (or any other tag) that can be set via as.

Button block

You can create a full-width button with Tailwind's w-full class.

Button truncation

You can truncate button content with Tailwind using max-w- and truncate classes.

Button content

SfButton provides prefix and suffix slots 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.

Playground