Back to Button
View full API on Button
Button
Loading
Static and interactive loading states.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "solid" | "outline" | "soft" | "ghost" | "link" | "destructive" | solid | Visual style. |
| size | "xs" | "sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-lg" | md | Height, padding and icon scale. |
| fullWidth | boolean | — | Stretches the button to fill its container. |
| asChild | boolean | false | Render the child element instead of a <button>, via Slot. |
| loading | boolean | false | Shows a spinner, disables interaction, hides leadingIcon, sets aria-busy. |
| loadingLabel | string | Loading | Screen-reader-only text announced while loading. |
| leadingIcon | React.ReactNode | — | Element rendered before the label. |
| trailingIcon | React.ReactNode | — | Element rendered after the label. |
| type | "button" | "submit" | "reset" | button | Native button type. Defaults to "button" so buttons inside forms do not submit accidentally. |
| disabled | boolean | — | Native disabled attribute. |
| className | string | — | Merged with the generated variant classes via cn(). |
More Button examples
VariantsSolid, outline, soft, ghost, link and destructive.SizesExtra-small through large on the default scale.IconsLeading, trailing and icon-only buttons.DisabledDisabled state across variants.As linkStyled anchors via `buttonVariants` for navigation.LayoutFull width, pill shape, and icon size scale.