Button Group
Join buttons into a single visual unit for toolbars, steppers, split buttons and 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
Dropdown menu
Select
Popover
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 tospacing(2)= 8px)--button-group-separator-color: color of theButtonGroup.Separatorline--button-group-text-background/--button-group-text-color/--button-group-text-border-color: surface, text, and 1px inset border ofButtonGroup.Text--button-group-text-font-size/--button-group-text-font-weight: typography ofButtonGroup.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.