Button

Displays a button or a component that looks like a button.

Demo

Use the size prop to change the size of the button.

An outline button that reads as destructive. Use it when the action is dangerous but not the primary one on screen.

Remember to add the data-icon inline-start or inline-end attribute to the icon for the correct spacing.

Use the rounded-full class to make the button rounded.

Render a Spinner component inside the button to show a loading state.

Wrap buttons in ButtonGroup to join them into a single control.

Apply buttonVariants to any element (like an anchor) to make it look like a button.

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "outline" \| "outline-destructive" \| "destructive" \| "ghost" \| "link"`	`"default"`	Visual style.
`size`	`"xs" \| "sm" \| "default" \| "lg" \| "xl" \| "icon" \| "iconXs" \| "iconSm" \| "iconLg"`	`"default"`	Height and padding. Every size is one step taller on phones and settles to its desktop height at the sm breakpoint, and the label follows the same ladder in reverse (text-base, then text-sm from sm up). xl is one step above lg, for hero and landing CTAs; it has no icon-only counterpart. Icon sizes also accept the kebab aliases icon-xs, icon-sm, and icon-lg.
`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().

Slot	Description
`default`	Button label and icons.