Button Group
Horizontally or vertically grouped buttons that share borders. Use for mutually exclusive toggles or multi-select option sets.
import
{ ButtonGroup, GroupButton } from "@pepulux/ui"Toggle group — single selection
Classic date-range toggle. Only one button can be active at a time.
Icon: Leading — format toggle
icon renders a 16px icon before the label (Figma Icon=Leading).
Icon: Only — alignment controls
iconOnly makes a square button (Figma Icon=Only). Pair with aria-label.
Multi-select — text formatting
Multiple buttons can be active simultaneously. Toggle each independently.
Vertical orientation
Stacked vertically. Buttons share left/right borders instead of top/bottom.
With disabled buttons
Individual buttons within the group can be disabled.
Size — sm and md
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "md" | Figma Size — 36px or 40px high |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout direction of the group |
| children* | ReactNode | — | GroupButton children |
| className | string | — | Additional CSS classes on the group wrapper |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | false | Highlights this button as the selected option |
| icon | ReactNode | — | Figma Icon=Leading — icon before the label |
| iconOnly | boolean | false | Figma Icon=Only — square button; children is the icon |
| activeTone | "brand" | "gray" | "brand" | Active-state look — brand tint or neutral gray |
| disabled | boolean | false | Dims the button and blocks clicks |
| onClick | () => void | — | Click handler |
| aria-label | string | — | Required when button is icon-only (no visible text) |
| className | string | — | Additional CSS classes |