ButtonGroup

Combine related buttons into one action group, with optional dividers for split buttons and compact toolbars.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use ButtonGroup to arrange related buttons with a shared group treatment. When actions need to move into a more menu because space is limited, use OverflowActions.

Place Button children directly to form the group. showSeparator controls the built-in dividers.
The group supplies variant, size, disabled, and other shared settings. An explicit size on a child Button overrides the group size.

Import

import { ButtonGroup } from '@snowui-design-system/components';

Usage

Gray variant

Filled variant

Outline variant

Borderless variant

Without separator

API Reference

Property	Type	Default	Example	Description
`variant`	`ButtonGroupVariant`	`"gray"`	`variant={value}`	Appearance variant for the group shell.
`size`	`ButtonGroupSize`	`—`	`size={value}`	Controls density of the shell and nested Buttons. An explicit value takes priority, followed by parent size context, then sm. A child Button can override the inherited size explicitly.
`disabled`	`boolean`	`false`	`disabled`	Disable the entire ButtonGroup and pass disabled to Buttons embedded in the group.
`showSeparator`	`boolean`	`true`	`showSeparator`	Show built-in decorative dividers between adjacent Button cells. false removes every divider without changing button actions or group layout.
`children`	`Snippet`	`—`	`<ButtonGroup>Content</ButtonGroup>`	Explicit, independently actionable Button children. Direct Button children become group cells and inherit group configuration. Dividers are built in; no manual Separator is needed.