Button group
Group a series of Buttons together on a single line or stacked vertically.
The group collapses the inner borders and radii so the buttons read as one segmented
control.
Import
import { ButtonGroup, ButtonToolbar, Button } from '@metatoy/bootstrap-styled';Basic
Wrap two or more Buttons in a ButtonGroup. The first and last keep their outer radii;
the seams between them are merged.
Sizing
Set size="sm" or size="lg" on the group to resize every button inside it at once —
no need to size each button individually.
Vertical
Add vertical to stack the buttons and collapse their vertical borders instead.
Button toolbar
Combine several groups (and other controls) inside a ButtonToolbar to build a more
complex set of controls. Use the toolbar’s own spacing to separate the groups.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "lg" | — | Bootstrap `.btn-group-sm` / `.btn-group-lg` — resize every button in the group. |
| vertical | boolean | — | Bootstrap `.btn-group-vertical` — stack buttons and collapse vertical borders. |
| as | React.ElementType | — | — |
ButtonGroup and ButtonToolbar both accept all native <div> attributes (and an as
prop for polymorphism).
Theming
The group itself only handles layout — merging the inner borders and radii. The buttons
inside carry their own tokens (--bs-btn-bg, --bs-btn-color, …) from each button’s
variant, and the outer corner radius comes from --bs-border-radius. Theme the buttons,
not the group, to restyle the control.
Accessibility
ButtonGroup doesn’t set ARIA for you: add role="group" (or role="toolbar" on a
ButtonToolbar) and an aria-label describing the set, since assistive tech otherwise
announces the buttons individually with no grouping context.