ButtonGroup

Groups multiple buttons together with shared styling and connected borders. Supports horizontal and vertical orientations.

Horizontal

Use pill for fully rounded corners and divider to show separator lines between buttons.

Combine actions with dropdowns, counters, and icon-only segments.

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction of the button group.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size applied to all buttons in the group.
`variant`	`"solid" \| "outline" \| "ghost"`	—	Variant applied to all buttons in the group.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color applied to all buttons in the group.
`className`	`string`	—	Additional CSS classes.
`pill`	`boolean`	`false`	Use fully rounded (pill) corners.
`divider`	`boolean`	`false`	Show divider lines between buttons.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

orientation"horizontal"

"horizontal" | "vertical"

Layout direction of the button group.

size"md"

"sm" | "md" | "lg"

Size applied to all buttons in the group.

variant

"solid" | "outline" | "ghost"

Variant applied to all buttons in the group.

color"blue"

Accent color applied to all buttons in the group.

className

string

Additional CSS classes.

pillfalse

boolean

Use fully rounded (pill) corners.

dividerfalse

boolean

Show divider lines between buttons.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}