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'
.
Button as a link
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.