Button Group

Joined strip of related action buttons with a hairline divider.

Introduction

Button Group joins related Button actions in a strip, with a full-height divider between children. The divider fill matches the button text color. Set size, variant, color, density, or rounded on the group to apply them to nested buttons. A Button can still override any of those props.

When to use: Toolbars, export/copy clusters, split buttons (primary action plus a mini overflow), and format actions that fire immediately. Use ToggleGroup when the controls select a value.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Button } from "@bridge-ui/vue/Components/Button";
import { ButtonGroup } from "@bridge-ui/vue/Components/ButtonGroup";

import { Button } from "@bridge-ui/react/Components/Button";
import { ButtonGroup } from "@bridge-ui/react/Components/ButtonGroup";

Basic usage

Nest Button children inside ButtonGroup. Pass aria-label (or aria-labelledby) on the group.

Orientation

Use orientation="vertical" for a column strip.

Sizes

size on the group applies to nested buttons unless they set their own. Available sizes match Button: 2xs, xs, sm, md (Button default), lg, xl, and 2xl.

Selected

Set selected on a Button for a pressed action. Use ToggleGroup when the controls select a value.

Color

color on the group applies to nested buttons. The divider follows the button text color.

Nested

Nest groups to space clusters of actions. Joined edges and dividers stay inside each inner group. Appearance props cascade through nested groups.

Split

Pair a labeled action with a density="mini" icon button for overflow options. Mini buttons stay square inside the group and inherit height and appearance from siblings.

Full width

Set full to stretch the group to the container width. Nested buttons grow equally.

No separator

Set separator={false} to join adjacent buttons without a hairline divider.

Related components

Button, ToggleGroup

Accessibility

• The group root uses role="group".
• Provide an accessible name on the group (aria-label or aria-labelledby).
• Icon-only buttons (density="mini") need their own aria-label.
• selected on a nested Button is a pressed action, not a value selection.

Anatomy

<div role="group"> <!-- ButtonGroup -->
  <button> <!-- Button -->
  <button>
</div>

Nested clusters wrap inner groups as the only direct children:

<div role="group"> <!-- outer -->
  <div role="group"> <!-- cluster -->
    <button>
    <button>
  </div>
  <div role="group">
    <button>
    <button>
  </div>
</div>

Use classes.root to style the group.

API