ButtonGroup
Joined row of kit Buttons that share one size and act as one control cluster.
Master
Toggle size and disabled to preview every ButtonGroup combination.
Usage
Use a group for related actions that share one size, like a view switch, a cancel and save pair, or a toolbar. The group sets size and disabled for every Button inside it. Only kit Buttons go in a group. See contracts/buttongroup.json for the full contract.
Do's
- Related sibling actions, such as a view switch.
- A cancel and confirm pair that should read as one cluster.
- A toolbar of same-size Buttons.
Don'ts
- Do not invent a local button group or segmented control.
- Do not mix sizes inside one group.
- Do not put more than one strong brand Button in a group or the view.
- Do not wrap Input, Select, or anything except kit Button.
- Do not nest groups.
- Do not use for picking one option (a pressed button). Use Segmented.
- Do not use for paging a list.
<ButtonGroup label="Plan period" size="md"> <Button emphasis="subtle">Day</Button> <Button emphasis="subtle">Week</Button> <Button emphasis="subtle">Month</Button> </ButtonGroup>