Default
Loading preview...
Examples
Sizes
Loading preview...
Default
Loading preview...
Outline
Loading preview...
Destructive
Loading preview...
Secondary
Loading preview...
Ghost
Loading preview...
Link
Loading preview...
Customizing
Custom Overlay Color
Use overlayClassname to replace the fill color with any Tailwind background class.
Loading preview...
Icon
Loading preview...
With Icon
Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.
Loading preview...
Border Radius
Loading preview...
Loading
Render a <Spinner /> component inside the button to show a loading state. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner for the correct spacing.
Loading preview...
Props
FillableButton
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "destructive" | "secondary" | "ghost" | "link" | "default" |
size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" |
overlayClassname | string | — |