ButtonGroup
<ButtonGroup>TailwindCSS ModulesVisually merges adjacent buttons into a continuous segmented control. Useful for toggle groups, pagination, and connected toolbar actions.
npx coloxo add button-group --style coloxo-cssimport { ButtonGroup } from '@coloxo/ui';Design Tokens:
1. Variant Matrix
ButtonGroup supports standard Button variants (though secondary variants are most common).
| Secondary (Default) | Secondary Brand | Primary | Icon Buttons | |
|---|---|---|---|---|
| Group |
2. Control heights (Sizes)
The group height is determined by the size prop of its children buttons. Always use identical sizes for children within the same group.
Sizes
size="sm"Compact toolbars, inline actions
size="md"DEFAULTStandard forms, page headers
size="lg"Hero sections, touch-friendly interfaces
3. Interactive Props Configurator
<ButtonGroup> <Button variant="secondary">Option 1</Button> <Button variant="secondary">Option 2</Button> <Button variant="secondary">Option 3</Button></ButtonGroup>4. Dark theme
ButtonGroup seamlessly adapts its internal borders to dark mode.
5. Enterprise layout compositions
ButtonGroups are often used in data table toolbars and rich text editors.
Documents (124)
Accessibility
The ButtonGroup automatically applies role='group' to the container so screen readers announce it as a related set of actions.
Focus outlines are correctly handled by elevating the z-index of the focused button to ensure the ring isn't clipped by adjacent items.
Ensure that IconButtons used inside a group have explicit aria-label props.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Button or IconButton children. |