Button Group

A connected set of related actions that share one visual boundary.

Group actions when they operate on the same object or represent adjacent choices. Keep the group short enough to scan as one control.

Built on Workshop1 compositionUpstream API

View

No action selected

Import

import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@workshop1/ui/components/button-group"

Composition

Place Button children directly inside ButtonGroup. The group removes the adjoining borders and rounds the outer edges. ButtonGroupText provides a non-action label, while ButtonGroupSeparator adds an explicit divider between related regions.

Set orientation="vertical" when actions should stack. Use the group role supplied by the primitive so assistive technology can identify the collection.

Accessibility

Every child still needs a clear accessible name. Do not use grouping to hide distinct destructive actions, and label icon-only children with aria-label.

Best practices

Keep actions in a meaningful order, with the primary action first.
Use a menu when there are too many related actions for one group.
Avoid mixing unrelated actions in one connected surface.