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

---

title: Button Group description: A container that groups related buttons together with consistent styling. links: docs: https://ui.shadcn.com/docs/components/button-group

<ComponentPreview name="button-group-demo" />

Installation

<CodeBlockCommand component="button-group" />

Examples

Orientation

<ComponentPreview name="button-group-orientation" />

Size

<ComponentPreview name="button-group-size" />

Nested

<ComponentPreview name="button-group-nested" />

Separator

<ComponentPreview name="button-group-separator" />

Split

<ComponentPreview name="button-group-split" />

Input

<ComponentPreview name="button-group-input" />

Input Group

<ComponentPreview name="button-group-input-group" />

Dropdown Menu

<ComponentPreview name="button-group-dropdown-menu" />

Select

<ComponentPreview name="button-group-select" />

Popover

<ComponentPreview name="button-group-popover" />

Migrating from Radix UI

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

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