Button Group

Related actions with shared radii and borders.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add button-group

Dependencies

What add button-group installs alongside the component. The CLI skips any you already have in a compatible version.

ZUNO registry

@zuno/utils

Examples

3 examples · 1 component

Shared borders

Outline buttons and a menu trigger read as one control.

Split button

A primary action with its options behind a separator.

Vertical

Stacked icon actions; each one has its own accessible name.

API reference

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`ButtonGroup` role="group"; give it an aria-label. Only the outer corners stay rounded and inner borders collapse into one.	`div`	—
`orientation` Direction of the group; horizontal follows the writing direction in RTL.	`"horizontal" \| "vertical"`	`"horizontal"`
`ButtonGroupSeparator` Decorative divider between filled buttons, which have no visible border.	`div`	—

Accessibility

role="group" with an aria-label (or aria-labelledby) tells assistive tech the actions belong together and what they are for.

Each button keeps its own Tab stop and name; this is not a toolbar with arrow-key navigation. For one-of-many or on/off choices, use ToggleGroup instead.

The focused button is raised above its neighbours so its whole focus ring shows.

Works with any Button variant and with DropdownMenu or Popover triggers, which render a button in place.

Server-safe: plain HTML and CSS.