ButtonGroup

Composition preview

Try ButtonGroup alongside its related actions components. These examples keep all actions local.

Usage

import { ButtonGroup } from "@/components/ui/button-group";
import { Button } from "@/components/ui/button";

<>
<ButtonGroup aria-label="Record actions">
  <Button variant="outline">Edit</Button>
  <Button variant="outline">Duplicate</Button>
</ButtonGroup>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

orientation: horizontal or vertical; standard div attributes

Usage & accessibility

Use distinct action labels; do not use a button group as a radio group.

Implementation contract

src/components/ui/button-group.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.