Blackwork
Scroll to top

Button

Triggers an action. Use it for primary work, secondary actions, and icon-only chrome.

Button

When to use

  • Submit a form, confirm a dialog, or start a task
  • Icon-only actions in a toolbar (size="icon")
  • A link that should look like a button (asChild)

Do not use Button for navigation that should stay a plain text link. Use variant="link" only when the control is still an action.

Usage

Usage

Examples

Variants

Variants

Sizes

Sizes

Loading

loading disables the button and shows a spinner. Do not combine it with asChild.

Loading

asChild

Merge button styles onto a real child such as Link. The child must accept button props.

asChild

Get started

API Reference

PropTypeDefaultDescription
variant"default" | "secondary" | "outline" | "ghost" | "destructive" | "link""default"Visual style of the button.
size"default" | "sm" | "lg" | "icon""default"Control height and padding. Use icon for square icon-only buttons.
loadingbooleanfalseDisables the button and shows a spinner.
loaderClassNamestring—Extra classes for the spinner.
asChildbooleanfalseMerge props onto the child instead of rendering a button. Do not combine with loading.
disabledbooleanfalseNative disabled state.

Notes

  • Prefer variant over custom colors.
  • size="icon" is square. Put an accessible name on it.
  • type defaults to button only if you set it. In forms, set type="submit" explicitly on the submit control.