Button
A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
Installation
CLI
Manual
Preview
Variant
Size
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" |