Button
Triggers an action. Seven visual variants and five sizes. Renders as a NuxtLink when the to prop is set.
Default
Primary action button.
Variants
Default for primary actions, secondary as a companion, outline for neutral, destructive for destructive actions, ghost for toolbars, link for inline text.
Sizes
sm (h-8), default (h-9), lg (h-10), iconSm (size-8), icon (size-9).
With icon
Drop an Icon inside the default slot. Horizontal padding adjusts on its own.
As a link
Set the to prop with an internal path or external URL. URLs starting with http open in a new tab with rel noopener.
Disabled
The disabled attribute drops opacity and blocks pointer events.
Loading
There is no built-in loading prop. Combine disabled with a spinning Icon (hugeicons:loading-03).
API Reference
Props, events, and slots for each sub-component.
Button
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "outline-destructive" | "destructive" | "ghost" | "link" | "default" | Visual style. |
| size | "sm" | "default" | "lg" | "icon" | "iconSm" | "default" | Height and padding. |
| to | string | — | Renders as NuxtLink when set. External URLs (http) open in a new tab. |
| as | string | "button" | HTML element to render when to is empty. |
| asChild | boolean | false | Render the child slot without a wrapper element. |
| class | string | — | Extra classes, merged with cn(). |