Button

A clickable element that triggers an action.

formprimitive

Loading preview...

Installation

npx baseui-cn add button

import { Button } from "@/components/ui/button"

<Button variant="default">Click me</Button>

<Button loading>Saving changes</Button>

All available button variants, including feedback styles.

Loading preview...

From xs to xl, plus compact and large icon sizes.

Loading preview...

Use the built-in loading prop to block interaction and show the spinner automatically.

Loading preview...

Combine icons with button text.

Loading preview...

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| "destructive-outline" \| "ghost" \| "link" \| "outline" \| "secondary" \| "warning"`	`"default"`	Visual style and color role
`size`	`"xs" \| "sm" \| "default" \| "md" \| "lg" \| "xl" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| "icon-xl"`	`"default"`	Height, padding, and icon-size
`loading`	`boolean`	`false`	Show a spinner overlay and set `aria-disabled` while an action is in progress

See the Base UI Button documentation for the full API reference, including all props, data attributes, and CSS classes.