Build faster with Pro
Unlock all premium blocks, templates, and support future updates.
Get Full AccessUse overlayClassname to replace the fill color with any Tailwind background class.
Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.
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.
| 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 | — |