Button Group

Usage

import { Button, ButtonGroup } from "@kanzo-tech/ui";

<ButtonGroup aria-label="Contract actions">
  <Button variant="outline">Claim</Button>
  <Button variant="outline">Reassign</Button>
  <Button variant="outline">Abandon</Button>
</ButtonGroup>

The buttons are children — ButtonGroup only groups them: it collapses the inner corner radii, overlaps the shared borders by a pixel, and lifts the focused button above its neighbours so its ring is never clipped.

A group of independent actions is not a labelled region on its own, so — like a <fieldset> — it needs an accessible name. role="group" plus a required aria-label (or aria-labelledby) is enforced at the type level: leave both off and it will not compile.

For a single-select choice (one option active at a time) reach for Segment Group instead — that is a different machine with roving focus and aria-checked. A Button Group is for independent actions sitting shoulder to shoulder.

Vertical

Text and separators

ButtonGroupText is a non-interactive label inside the cluster (a prefix, a unit). ButtonGroupSeparator divides two sub-clusters — vertical by default, since the group runs along the inline axis.

Anatomy

ButtonGroup
├── ButtonGroupText
├── Button (child)
├── ButtonGroupSeparator
└── Button (child)

API Reference

ButtonGroup

Renders a div with role="group".

ButtonGroupText

Renders a span. Mirrors InputGroupText.

ButtonGroupSeparator

A thin wrapper over Separator; orientation defaults to "vertical".

ButtonGroupProps is exported, so a wrapper can take the same props without restating them.