Button Group

PreviewCopy Anchor Link

Group actions that belong together. Use outline buttons for a visible group boundary and a shared border between adjacent actions. Avoid primary and ghost buttons in a group.

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add https://migoy.stanleyaf.com/r/button-group.json

Installs Button Group with Migoy Button and Separator. Uses the existing cn utility and semantic theme tokens.

UsageCopy Anchor Link

import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from '@/components/ui/button-group';

Place Buttons directly inside the group and set their sizes individually. Use the same size across a group to keep the joined edges aligned. Nest separate groups when you need space between clusters of actions.

CompositionCopy Anchor Link

ButtonGroup
├── Button, Input, or ButtonGroupText
├── ButtonGroupSeparator (optional)
└── Button or popup trigger rendered as a Button

The group joins the edges of adjacent controls. Keep the rendered controls as direct children so the group can style their shared edges. A Dropdown Menu can sit inside the group because its root adds no wrapper and its content opens in a portal. For separate clusters, nest one Button Group per cluster inside an outer group.

Split buttonCopy Anchor Link

Pair a default action with a menu of alternatives. The Export button selects PDF in this preview, and the chevron opens the other formats. The preview reports the selected format.

Input with an attached actionCopy Anchor Link

Join an input to its submit button when they belong to the same form action. The input can shrink while the button keeps its label visible. Try searching for “design” in this preview.

VerticalCopy Anchor Link

Set orientation="vertical" to stack the actions. Prefer icon-only buttons with accessible names when the icons clearly convey the actions. Use visible labels when an icon alone would be ambiguous.

SeparatorsCopy Anchor Link

Use ButtonGroupSeparator when you need an explicit divider. It defaults to vertical for a horizontal group. Set it to horizontal inside a vertical group. Adjacent outline buttons already share a border.

TextCopy Anchor Link

Use ButtonGroupText for a non-interactive text segment. Use asChild when the text needs its own element, such as a label associated with an input.

APICopy Anchor Link

Set size and variant on each Button. Use the matching controlSize on an attached Input.

Keyboard and accessibilityCopy Anchor Link

• Give the group a name with aria-label or aria-labelledby.
• Tab moves through the enabled buttons in order. Give icon-only buttons accessible names.
• Use Toggle Group for options with a persistent pressed state.

Based on shadcn Button Group.