Join buttons into a single visual unit — toolbars, steppers, split buttons, search affordances

import { ButtonGroup } from "@plexui/ui/components/ButtonGroup";

Wraps any row of controls — Button, Input, Popover.Trigger, etc. — and removes the shared border so they read as one unit. Nest ButtonGroup inside itself to create visually separated sub-groups (the outer group automatically spaces them).

Examples

Overview

Orientation

Size

Nested

Separator

Split

Input

Input group

Select

us-east-1

API

ButtonGroup

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Direction of the joined items
`className`	`string`	—	Applied to the root `<div>`

Renders a <div role="group">. All other <div> attributes are forwarded.

ButtonGroup.Separator

Inherits from Separator. orientation defaults to "vertical" (the axis that looks right between horizontal items); pass an explicit value inside a ButtonGroup orientation="vertical".

ButtonGroup.Text

Renders a muted label pill that slots into the group alongside buttons. Use it for prefixes ("@", "https://"), currency hints, or any non-interactive label that should share the joined shape.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as the passed child (e.g. a `<label>` tied to an input)
`className`	`string`	—	Applied to the wrapper

Styling

Nesting ButtonGroup inside a parent ButtonGroup automatically introduces a gap between the sub-groups. The group-specific tokens:

--button-group-nested-gap — space between sibling sub-groups (defaults to spacing(2) = 8px)
--button-group-separator-color — color of the ButtonGroup.Separator line
--button-group-text-background / --button-group-text-color / --button-group-text-border-color — surface, text, and 1px inset border of ButtonGroup.Text
--button-group-text-font-size / --button-group-text-font-weight — typography of ButtonGroup.Text

Radius, border, and focus styles of joined buttons come from each child control's own tokens (--button-radius, --input-radius, etc.) — the group only strips the shared edge radii so joined items align.

Button Group