ButtonGroup

Button group: combines multiple oas-button elements into a value-selection group; adjacent button corners merge and hover only highlights the current item.

Basic usage

Basic button group

JanuaryFebruaryMarch

Example

Type & size passthrough

type / size are passed through uniformly to all child buttons in the group. size supports five tiers: xs / small / medium (default) / large / xl.

Type & size passthrough

LeftMiddleRightXSXSXSXLXLXL

Example

Single select

Declare the current selection with value; clicking dispatches oas-change with detail: { value }.

Single-select group

Option AOption BOption C

Example

Multiple select

Add multiple to enable multi-select; value uses comma-separated selected values. Clicking dispatches oas-change with detail: { value: [] }.

Multi-select group

Tag ATag BTag C

Example

Accessible name

aria-label gives the button group container an accessible name, letting screen readers announce it as a single focusable group; when unset, the built-in i18n label "button group" is used. When multiple groups exist on a page, use names to distinguish them.

aria-label accessible name

List viewGrid viewExport CSVExport PDF

Example

Vertical

Vertical button group

TopMiddleBottom

Example

Disabled & mixed

disabled disables the whole group; buttons without a value attribute act as regular buttons and don't participate in selection.

Disabled & mixed

DisabledDisabledSaveDeleteMore actions

Example

API

Attributes

Attribute	Description	Type	Default
aria-label	Group container accessible name (defaults to the built-in i18n label)	—	—
disabled	Disable the whole group	boolean	—
multiple	Multi-select mode	boolean	—
size	Size passed to child buttons	string	—
type	Type passed to child buttons	string	—
value	Selected value (single value in single-select, comma-separated in multi-select)	string	—
vertical	Stack vertically, merging corners top/bottom	—	—

Events

Event	Description
oas-change	Selection changed. Single-select detail: { value }; multi-select detail: { value: [] }

Slots

Name	Description
default	—

Note: child buttons declare their selectable value via the value attribute; children without value are regular buttons and don't participate in selection or dispatch oas-change. The selected state is expressed through the child button's aria-pressed; use oas-button[aria-pressed='true'] to customize the selected style.