Button

Versatile button with variants, sizes, loading state, and icon support.

Installation

Installs the Base UI flavor. Switch in the right panel.

Playground

Inspect

Variants

Inspect

Sizes

Inspect

With Icons

Inspect

Loading & Disabled

Inspect

API Reference

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "tertiary" \| "ghost"	"primary"	Visual style of the button.
size	"sm" \| "md" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"	"md"	Size of the button.
loading	boolean	false	Shows a spinner and disables the button.
active	boolean	false	Forces the pressed/held visual — e.g. while a dropdown or popover the button opened is showing.
leadingIcon	IconComponent	—	Icon displayed before the label.
trailingIcon	IconComponent	—	Icon displayed after the label.
asChild	boolean	false	Merge props onto the child element instead of rendering a <button>.
disabled	boolean	false	Disables the button.