When to use
Use when two or three related actions belong to the same decision.
Loading…
Find components, patterns, tokens, and docs
Documentation
Groups mutually related actions so they scan as one control.
Keep groups to 2–4 actions that operate on the same object.
Appearance is not enough. This is the contract for when the control earns a place in the product.
Use when two or three related actions belong to the same decision.
Don't group unrelated actions just to save space.
Reduces hunting for sibling actions that belong together.
Each button remains a real button. Selected state must not rely on color alone.
<ButtonGroup
variant="primary"
size="medium"
>
View
</ButtonGroup>