Button Group
Join buttons into a single visual unit for toolbars, steppers, split buttons and search affordances.
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@plexui/vue/components/ButtonGroup";Wraps any row of controls (Button, Input, a popover trigger, ...) 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 |
class | string | Applied to the root <div> |
Renders a <div role="group">. All other attributes and listeners fall through to it.
ButtonGroupSeparator
Inherits from Separator. orientation defaults to "vertical" (the axis that looks right between horizontal items); pass an explicit value inside a ButtonGroup orientation="vertical".
ButtonGroupText
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 |
|---|---|---|---|
as-child | boolean | false | Render the slotted child (e.g. a <label> tied to an input) instead of a <div> |
class | 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 theButtonGroupSeparatorline--button-group-text-background/--button-group-text-color/--button-group-text-border-color: surface, text, and 1px inset border ofButtonGroupText--button-group-text-font-size/--button-group-text-font-weight: typography ofButtonGroupText
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.