Button

A clickable control used to trigger an action or event.

$bunx shadcn@latest add @nx-ui/button

Installs withutils

Used byaccount-settings ai-artifact ai-attachments ai-audio-player ai-chat ai-checkpoint ai-code-block ai-commit ai-confirmation ai-context ai-conversation ai-environment-variables ai-message ai-mic-selector ai-open-in-chat ai-plan ai-prompt-input ai-question ai-queue ai-speech-input ai-stack-trace ai-suggestion ai-terminal ai-voice-selector ai-web-preview alert-dialog app-launcher app-shell attachment auth-login auth-recovery auth-signup calendar calendar-view carousel color-picker combobox credentials cta-banner data-table date-picker dialog editable error-page ewc-selector file-upload filter-bar hero-split input-group isochrone-tool kanban listing-card listings-filters listings-panel location-selector map-toolbar map-view marketplace-map material-selection material-selector message-scroller notification-centre onboarding-checklist page-hero pagination pricing-table project-scope-selector questionnaire route-tool settings sheet sidebar site-footer site-header stockpile-visualiser theme-toggle toast transfer-note transfer-preview

Variants

The six button styles.

Sizes

From xs to lg, plus icon-only sizes.

With icons

Icons sit inline-start or inline-end of the label.

Disabled & loading

Disabled controls dim and stop responding; use a spinner for pending actions.

API reference

Exported parts and their props, extracted from the component source.

Prop	Type	Default	Description
`variant`	`"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link" \| …`	`"default"`	—
`size`	`"default" \| "xs" \| "sm" \| "lg" \| "xl" \| "icon" \| …`	`"default"`	—

…extends ButtonPrimitive.Props