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

Variant & round passthrough

variant / round are passed through uniformly to all child buttons, just like type / size — set once on the group and every child button applies it. variant supports six shapes matching oas-button: solid (default) / outlined / dashed / filled / text / link; round gives child buttons a capsule rounding.

Variant & round passthrough

OutlinedOutlinedOutlinedDashedDashedDashedOption AOption BOption C

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 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

Spread

spread makes child buttons equally share the full container width (common for mobile action bars / form footer button groups). Combine with type / size / variant / pill.

Spread

ConfirmCancelOption AOption BOption CSavePublishDelete

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

Pill

The pill attribute turns the whole group into a pill: the first/last buttons use --oas-radius-full (999px) corners — left rounded on the first / right rounded on the last in a horizontal group, top on the first / bottom on the last in a vertical one. Middle buttons stay square.

Pill

Option AOption BOption CPreviousNextTopMiddleBottomTopMiddleBottom

Example

Separator

Put an <oas-button-group-separator> inside the group to render a divider line: a 1px vertical line in a horizontal group, a 1px horizontal line in a vertical one (direction follows the group orientation automatically). Separators sit flush between items and don't participate in corner merging — place them between buttons/nested groups.

Separator

CopyCutPasteTopMiddleBottom

Example

Nested groups

An oas-button-group can contain another oas-button-group as a single whole item, participating in corner merging and flush layout. The outer group passes its start/end corner radii to the nested group via --oas-button-group-start-radius / --oas-button-group-end-radius. The nested group manages its own buttons (outer type / size are not passed through); outer disabled disables the nested group as a whole.

Nested groups

UndoRedoSavePrevNext

Example

Split Button

Compose a split button with a button-group plus oas-dropdown split: the main button dispatches oas-action (primary action), the arrow button opens the dropdown menu (menu selection goes through oas-select).

Split Button

SavePublish

Example

Composition

Compose button groups with existing components such as overlays and inputs.

Buttons + overlays

EditCopyPaste?

Example

Buttons + input

SearchReset

Example

Toolbar (multiple groups)

BIULeftCenterRightCSVPDF

Example

API

oas-button-group

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	—
pill	Pill shape: large rounding on the group outer edges (--oas-radius-full / 999px)	—	—
round	Group-level round passthrough to child buttons (set once, all capsule-rounded)	boolean	—
size	Size passed to child buttons	string	—
spread	Buttons flex:1 to fill the container width evenly (mobile action bars / form footer button groups)	—	—
type	Type passed to child buttons	string	—
value	Selected value (single value in single-select, comma-separated in multi-select)	string	—
variant	Group-level variant passthrough to child buttons (set once, applies to all)	string	—
vertical	Stack vertically, merging corners top/bottom	boolean	—

Events

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

Slots

Name	Description
default	Button group members (oas-button)

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.