ComponentsButtonGroup

formstexulinot agent-emittableapp

ButtonGroup

button-group

Groups related buttons with shared borders and orientation.

Live examples

Attached horizontal group

Attached horizontal group

Loading demo…

Props

Public props for ButtonGroup
NameKindRequiredDefaultDescription
orientationenum (horizontal, vertical)no"horizontal"—
attachedbooleannotrueShare borders between buttons
labelstringno—Accessible name for the group
classstringno——
childrenslotno——

Keyboard

Keyboard behavior for ButtonGroup
KeyAction
—See accessibility notes for keyboard behavior.

Accessibility

  • role=group with an optional accessible label.

Evidence for button-group

Latest committed gates for button-group (as of 2026-10-23). Static snapshot — not live CI.

Behavior

n/ano behavior scenario

No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).

Size (gzip)

texuli/button-group · budget 12.0 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • Cluster related actions that share a single decision

Don’t use when

Prefer another component

  • Unrelated actions across a toolbar (use a plain flex row)