Button
A clickable control used to trigger an action or event.
$
Registry itembunx shadcn@latest add @nx-ui/buttonInstalls withutils
Used byai-artifactai-chatai-checkpointai-code-blockai-confirmationai-contextai-conversationai-messageai-open-in-chatai-planai-prompt-inputai-queueai-web-previewalert-dialogapp-shellattachmentauth-loginauth-recoveryauth-signupcalendarcalendar-viewcarouselcolor-pickercomboboxcta-bannerdata-tabledate-pickerdialogeditableerror-pageewc-selectorfile-uploadfilter-barhero-splitinput-groupisochrone-toolkanbanlisting-cardlistings-filterslistings-panellocation-selectormap-toolbarmap-viewmarketplace-mapmaterial-selectormessage-scrollernotification-centreonboarding-checklistpage-heropaginationpricing-tableproject-scope-selectorroute-toolsettingssheetsidebarsite-footersite-headertheme-toggletransfer-notetransfer-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