║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Button description: Displays a button or a component that looks like a button. links: docs: https://ui.shadcn.com/docs/components/button

<ComponentPreview name="button-demo" />

Installation

<CodeBlockCommand component="button" />

---

Examples

Variants

<ComponentPreview name="button-variants" />

Shape

<ComponentPreview name="button-shape" />

With Icon

<ComponentPreview name="button-with-icon" />

Loading

<ComponentPreview name="button-loading" />

Button Group

<ComponentPreview name="button-group" />

Split Button

<ComponentPreview name="button-split" />

Migrating from Radix UI

<Steps> <Step> <include>migration-steps/common.mdx</include> </Step> </Steps>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║