Components
Button group
Groups related buttons into a single visual unit. Use for action sets where buttons share context.
A ButtonGroup wraps two or more <Button> (or <IconButton>) elements into a connected cluster. Use it when the buttons are siblings in the same decision — the surrounding container makes the grouping explicit.
Use it for
- Save / Cancel pairs in dialogs and form footers
- Confirm / Discard pairs in destructive flows
- Sign up / Log in stacks on auth screens
- Toolbar action clusters where buttons act together
Import
import { ButtonGroup, Button } from '@brikdesigns/bds';Variants
Horizontal (default)
Vertical
Stack buttons in a column. Pair with fullWidth on each button for stacked auth screens.
Full width
fullWidth on the group stretches each child equally. Use in narrow contexts (sheets, sidebars).
When not to use
Don't use ButtonGroup for unrelated actions. It's a semantic group — readers infer that the buttons share context. Two unrelated CTAs in the same row look the same visually but break expectations.
- Don't put more than 3 buttons in a group. A "toolbar" of 5 unrelated actions is a different pattern — use spacing, not grouping.
- Don't mix sizes inside a group. All buttons should share the same
size. Mixed sizes break the rhythm.
Accessibility
- Renders a plain
<div>container. Each child Button keeps its own keyboard semantics. - Tab order follows DOM order — for vertical groups, primary actions should appear first in source.
- No
role="group"is added by default; if the group represents a single ARIA group (e.g. radiogroup-like behavior), wrap in your own labeled<fieldset>or<div role="group" aria-labelledby="...">.
API
ButtonGroup
| Prop | Type | Default |
|---|---|---|
children | ReactNode (required) | — |
orientation | 'horizontal' | 'vertical' | 'horizontal' |
fullWidth | boolean | false |
Plus all standard <div> HTML attributes.
Related
- Button — the primary child component
- Storybook playground — live variants and patterns