Playground

Button

Triggers an action or event, such as submitting a form or opening a dialog.

Default

Variants

Sizes

With Icon

Loading

Disabled

Props

PropTypeDefaultDescription
variant"default" | "secondary" | "destructive" | "outline" | "ghost" | "link""default"Visual style of the button.
size"sm" | "default" | "lg" | "icon""default"Size of the button. All sizes meet 44px minimum touch target.
asChildbooleanfalseRender as the child element (e.g. an anchor tag) via Radix Slot.
loadingbooleanfalseShow a spinner overlay and disable interaction. Preserves button width.
disabledbooleanfalseDisable the button. Applied automatically when loading.