Components
ButtonGroup
A group of pill buttons inside a rounded pill container, supporting horizontal and vertical orientations with configurable gap
Playground
Installation
pnpm add @tessinaui/uiUsage
import { ButtonGroup, ButtonGroupItem } from "@tessinaui/ui";<ButtonGroup variant="outline" size="md">
<ButtonGroupItem leadingIcon={<Scissors />} label="Cut" />
<ButtonGroupItem leadingIcon={<Copy />} label="Copy" />
<ButtonGroupItem leadingIcon={<Clipboard />} label="Paste" />
</ButtonGroup>Examples
Default
A horizontal group of pill buttons with leading icons and labels.
Variants
Two visual styles — outline with a container background and ghost with a transparent one.
Sizes
Five sizes from xs to xl scale height, padding, and icon footprint together.
Vertical
Set orientation="vertical" to stack items into a column.
Icon only
Drop the label and provide an aria-label for compact icon-only toolbars.
States
A loading item, a single disabled item, and a fully disabled group.
API Reference
ButtonGroup Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "outline" | "ghost" | "outline" | Visual style applied to all items |
intent | "none" | "error" | "none" | Semantic color intent applied to all items |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Size applied to all items |
orientation | "horizontal" | "vertical" | "horizontal" | Layout direction of the group |
gap | "micro" | "none" | "micro" | Gap between items — micro is 4px, none is 0px |
disabled | boolean | false | Disables all items in the group at once |
dir | "ltr" | "rtl" | "ltr" | Text direction — RTL reverses icon/label order |
ButtonGroupItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Visible label text |
leadingIcon | React.ReactNode | — | Icon rendered before the label; replaced by a spinner when loading |
trailingIcon | React.ReactNode | — | Icon rendered after the label; hidden when loading |
loading | boolean | false | Shows a spinner and disables this item |
disabled | boolean | false | Disables this item individually |
aria-label | string | — | Accessible label (required when no visible label is provided) |
onClick | MouseEventHandler | — | Click handler |
Supported Combinations
| Variant | Intents |
|---|---|
outline | none, error |
ghost | none, error |
Sizes
| Size | Height | Use case |
|---|---|---|
xs | 40px | Compact toolbars |
sm | 48px | Secondary actions |
md | 56px | Default, most use cases |
lg | 64px | Prominent toolbars |
xl | 104px | Hero / large controls |
Accessibility
The ButtonGroup component:
- Renders with
role="group"on the wrapper for semantic grouping - Requires
aria-labelon icon-onlyButtonGroupItemelements focus-visible:ring-2focus ring meets WCAG 2.1 AA on each item- Touch targets ≥ 44×44px for xs/sm; larger sizes exceed minimum
loadingsetsaria-busy="true"and disables the itemdisabled(item or group) setspointer-events-noneanddisabledattribute- RTL fully supported via the
dirprop