Button Group

Grouped actions for compact toolbars and segmented controls. Items share one outer border and use dividers instead of separate button chrome.

Included in the single kansho full pack. Components are not offered as separate installs.

Action cluster

Icon, text actions, overflow

States

Icon only

Segmented text

Mixed content

Destructive item

Disabled item

Loading item

Overflow item

Component documentation

Button Group

components/ui/button-group.tsx

Purpose

Groups closely related actions into one visually connected control cluster.

Appropriate use

Use when actions share context or represent mutually comparable modes.

Example

components/ui/button-group.tsx has a representative live example in the "Action cluster" section on /components/button-group.

States

Items support active, loading, destructive, disabled, icon-only, variant, and size states.

API and props

ButtonGroup accepts native div props and size; ButtonGroupItem extends button props with active, loading, iconOnly, size, variant, and ref.

Dependencies

React, Spinner, and the Kansho cn utility.

Accessibility

The container exposes role group, active items use aria-pressed, and loading items retain button semantics.

Limitations

It does not enforce single selection; callers must coordinate mutually exclusive state when required.

Source

Source: components/ui/button-group.tsx.

Full pack

components/ui/button-group.tsx is documented at /components/button-group and installs only through the single Kansho full pack; no individual component install is offered.