Button

Use Button for an action. Keep ordinary navigation as a link; use asChild only when a link needs button styling.

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)

Use a plain link for text navigation. variant="link" gives an action the appearance of a text link while keeping button behavior.

Usage

Examples

Variants

Use default for the main action in a group, secondary or outline for supporting actions, and destructive for an action with destructive consequences. ghost suits compact toolbars where a persistent border would add noise.

Variants

Sizes

Loading

loading disables the button and shows a spinner while an action such as saving or submitting is in progress. Keep the label stable so the button width and action name do not change. loading cannot be combined with asChild.

asChild

asChild passes button styles and props to a child such as Link. The child component must accept and forward those props.

asChild

Get started

API Reference

Prop	Type	Default	Description
`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.
`loading`	`boolean`	`false`	Disables the button and shows a spinner.
`loaderClassName`	`string`	—	Extra classes for the spinner.
`asChild`	`boolean`	`false`	Merge props onto the child instead of rendering a button. Do not combine with loading.
`disabled`	`boolean`	`false`	Native disabled state.

Notes

Prefer variant over custom colors.
Buttons use gap-2 between an icon and label. Icon-only buttons reset the gap automatically.
size="icon" renders a square button. Give icon-only buttons an accessible name, such as aria-label="Search".
In forms, set type="submit" explicitly on the submit button.

Glass appearance

Use glass for controls placed over an image or translucent surface, and glass-primary for the main action in that group. See Liquid glass for setup and contrast requirements.