Layout UI

Button Group

Wrapper that visually fuses adjacent Button children into a single segmented control, collapsing inner borders and radii. Server-compatible.

Preview

Installation

bash
npx shadcn@latest add @layout/button-group

Usage

tsx
import { ButtonGroup } from "@/registry/layout/button-group/button-group";

Examples

Alignment picker

Vertical group

Primary action group

Guidelines for AI agents

Place two or more Button components as direct children. Orientation defaults to horizontal; pass orientation="vertical" for a stacked group. All buttons in the group should share the same variant so the fused appearance is consistent. ButtonGroup only adjusts radius and border-margin; all other button styling comes from the Button component itself.

Never

  • Nevermix Button variants within the same ButtonGroup; use a single variant across all children
  • Neveruse ButtonGroup for navigation tabs; use a Tabs component instead
  • Neverplace non-Button elements as direct children; the [&>*] selectors target sibling elements and may break non-button markup
  • Neveradd margin between buttons manually; ButtonGroup handles negative margin to collapse borders

Tokens consumed

--layout-radius--layout-duration-base