System
Names follow an emphasis ladder from default (loudest) to text (quietest), and a tone suffix swaps the color family: -destructive or -muted.
defaultoutlineghostsoftghost-muteddestructivetextghost-destructiveEvery variant accepts every size. inline strips height + padding for the text variant.
iconStart and iconEnd drop a Lucide icon on either side of the label and auto-pad that side. Pass both to bracket the action.
disabled drops to 50% and kills pointer events. loading swaps the label for a spinner and blocks clicks without resizing the button.
The text variant reads as an inline link. textHover sets the color it shifts to on hover, and defaults to accenthere; pass it explicitly on any other variant to override that variant’s own hover color.
asChild renders the button’s styles onto its child, so a Link (or any element) becomes the button instead of nesting one inside the other.
Every prop the component accepts.
| Prop | Type | Default | Notes |
|---|---|---|---|
variant | default · outline · ghost · soft · text · destructive · ghost-destructive · ghost-muted | default | Visual style and emphasis |
size | sm · default · lg · icon · inline | default | Height + padding scale |
iconStart / iconEnd | LucideIcon | none | Icon before/after the label; auto-pads that side |
iconSize | xs · sm · default · lg · xl | default | Overrides the size-derived icon scale |
textHover | accent · destructive · foreground · background | accent on text, unset otherwise | Hover color override, any variant; background for transparent variants over bright/hoverGlow backdrops |
hoverGlow | boolean | false | Backdrop-brightness lens hover for transparent variants over animated backdrops |
loading | boolean | false | Swaps label for a spinner; blocks clicks |
disabled | boolean | false | 50% opacity, no pointer events |
asChild | boolean | false | Renders styles onto the child (e.g. a Link) instead of a button |