Buttons are an essential part of any application. Buttons can have different radius factors using the rounded
prop.
Show codeHide code
Buttons can have a smaller size. Use the size
prop to change the size of a button.
Show codeHide code
Buttons can have a glowing badge indicator. Use the badge
prop to add a badge to your buttons.
Show codeHide code
Buttons can have solid background colors. Use the variant="solid"
prop and the color
prop to make solid buttons.
Show codeHide code
Buttons can have pastel background colors. Use the variant="pastel"
prop and the color
prop to make pastel buttons.
Show codeHide code
Buttons can have outline background colors. Use the variant="outline"
prop and the color
prop to make outline buttons.
Show codeHide code
Buttons can have icons, both on the left and on the right. Use the Icon
component inside the button slot to render the icon you need.
Show codeHide code
Buttons can have a flat shadow. Use the shadow="flat"
prop to add shadows to your buttons.
Show codeHide code
Buttons can have a hover shadow. Use the shadow="hover"
prop to add shadows to your buttons.
Show codeHide code
Buttons can be shown in a loading state. Use the loading
prop to show a loading indicator.
Show codeHide code
Buttons can be shown in a disabled state. Use the disabled
prop to disable the button.
Show codeHide code
Buttons can be grouped together. Use them inside a BaseButtonGroup
component.
Show codeHide code
badge
Show exampleHide example
badge-pulse
Show exampleHide example
disabled
Show exampleHide example
href
Show exampleHide example
loading
Show exampleHide example
rel
Show exampleHide example
shadow
Show exampleHide example
target
Show exampleHide example
to
Show exampleHide example
type
Show exampleHide example
color
Show exampleHide example
rounded
@since
2.0.0
Show exampleHide example
size
Show exampleHide example
variant
@since
2.0.0
Show exampleHide example
color
Show exampleHide example
rounded
Show exampleHide example
size
Show exampleHide example
variant