Button Group
Groups related buttons, joined into one control or spaced apart, such as a split button or a set of actions.Joined actions
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Button, ButtonGroup } from '@advui/core'
<ButtonGroup aria-label="Message actions" variant="outline">
<Button>Archive</Button>
<Button>Report</Button>
</ButtonGroup>Examples
Split button
A main action plus a menu of options.Preview
Code
Vertical and spaced
A vertical zoom control, and `attached={false}` for spaced actions.Preview
Code
API reference
ButtonGroup
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | — | Names the group, e.g. "Message actions". Recommended. |
attached | boolean | true | Join the buttons into one control; `false` spaces them apart. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Lay the buttons out in a row or a column. |
variant | 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | — | Variant for buttons that do not set their own. |
size | 'sm' | 'md' | 'lg' | — | Size for buttons and icon buttons that do not set their own. |
Accessibility
role="group"with anaria-label, so screen readers announce the buttons as one set.- Each button keeps its own name, state and place in the tab order. For one choice among options, use Toggle Group.
- A focused button is raised above its neighbours, so its focus ring is never covered.
| Key | Action |
|---|---|
| Tab | Moves through the buttons one by one. |
Platform notes
Web
A
div with role="group".iOS
Buttons keep their own touch targets; VoiceOver reads each one.
Android
Same as iOS.