Button
A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
Installation
CLI
Manual
Preview
Examples
Size
Use the size prop to change the size of the button.
button-size
Default
button-default
Outline
button-outline
Secondary
button-secondary
Ghost
button-ghost
Destructive
button-destructive
Link
button-link
Icon
button-icon
With Icon
You can add the data-icon='inline-start' or data-icon='inline-end' attribute to the icon for the correct spacing.
button-with-icon
Rounded
Use the rounded-full class to make the button rounded.
button-rounded
Spinner
Render a <Spinner /> component inside the button to show a loading state.
button-spinner
As Link
You can use the buttonVariants helper to make a link look like a button.
button-aschild
API Reference
Button
The Button component is a wrapper around the button element that adds a variety of styles and functionality.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "ghost" | "destructive" | "secondary" | "link" | "default" |
size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" |