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 + label — format toggle
Icons with text labels. Works well for view mode switches.
Icon-only — alignment controls
Icon-only buttons for compact toolbars.
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.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| 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 |
| 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 |