Button

Import

Usage

Icons inside a button are sized automatically (size-4).

As a Link

Render the button as another element with as-child / asChild:

Here Link comes from @inertiajs/vue3 or @inertiajs/react.

Loading State

Variants and Sizes

variant	Use
default	Primary action (brand color)
secondary	Secondary action
destructive	Delete and other dangerous actions
outline	Bordered
ghost	No background
link	Text link style

size
default	h-9
sm	h-8
lg	h-10
icon	Square size-9

For button-styled elements that aren't a Button, use the exported buttonVariants({ variant, size }) class helper.

Related

• Dialog
• Dropdown Menu