Core / Buttons
Button Group
Places related actions into a consistent flexible group.
Preview
import { ButtonGroup } from "@/components/ui/design-system/core/buttons/ButtonGroup"
<ButtonGroup><Button>Save</Button><Button variant="outline">Cancel</Button></ButtonGroup>Installation
Full library
pnpm install:project /absolute/path/to/your-projectManual install
The guided installer is the next library milestone. This component will be selectable as Core → Buttons → Button Group.
Usage
<ButtonGroup><Button>Save</Button><Button variant="outline">Cancel</Button></ButtonGroup>Adopt to your project
Use the group for layout only; each child remains responsible for its own semantic variant and behavior.
<ButtonGroup className="rounded-full px-6 shadow-sm"><Button>Save</Button><Button variant="outline">Cancel</Button></ButtonGroup>Accessibility
Keep the tab order aligned with the visual order. Group only related actions, and avoid hiding a destructive action among primary actions.
API reference
| Attribute | Type | Default | Required | Purpose |
|---|---|---|---|---|
children | ReactNode | — | Yes | Related action components. |
orientation | "horizontal" | "vertical" | "horizontal" | No | Direction of grouped actions. |
spacing | "none" | "xs" | "sm" | "md" | "lg" | "sm" | No | Space between actions. |
align | "start" | "center" | "end" | "stretch" | "start" | No | Cross-axis alignment. |
className | string | — | No | Local layout adjustment. |