Button group

<oblyx-button-group> joins several <oblyx-button> children into one visual control: outer corners rounded, the seam between adjacent buttons squared off, laid out in a row or a column. It is purely compositional: children are plain <oblyx-button> elements the caller orders, and every visual effect is a CSS selector reaching into each button from the outside, with <oblyx-button> itself left untouched. That also means the group needs no JavaScript to stay correct when a child is added or removed after the page has rendered.

Basic button group

Left

Center

Right

HTML

Kotlin

<oblyx-button-group label="Text alignment">
  <oblyx-button>Left</oblyx-button>
  <oblyx-button>Center</oblyx-button>
  <oblyx-button>Right</oblyx-button>
</oblyx-button-group>

oblyxButtonGroup(label = "Text alignment") {
  oblyxButton { +"Left" }
  oblyxButton { +"Center" }
  oblyxButton { +"Right" }
}

Orientation

orientation is horizontal (the default) or vertical. The rounded/square corners follow whichever axis is active.

Vertical button group

List

Grid

Board

HTML

Kotlin

<oblyx-button-group orientation="vertical" label="View">
  <oblyx-button>List</oblyx-button>
  <oblyx-button>Grid</oblyx-button>
  <oblyx-button>Board</oblyx-button>
</oblyx-button-group>

oblyxButtonGroup(orientation = OblyxButtonGroupOrientation.VERTICAL, label = "View") {
  oblyxButton { +"List" }
  oblyxButton { +"Grid" }
  oblyxButton { +"Board" }
}

Size

Setting size on the group cascades to every child button, overriding whatever size each button carries on its own. Leaving it unset leaves every child free to set its own size. A group with no size is just a layout container.

Sized button groups

HTML

Kotlin

<oblyx-button-group size="sm" label="Zoom">
  <oblyx-button>-</oblyx-button>
  <oblyx-button>+</oblyx-button>
</oblyx-button-group>
<oblyx-button-group size="lg" label="Zoom">
  <oblyx-button>-</oblyx-button>
  <oblyx-button>+</oblyx-button>
</oblyx-button-group>

oblyxButtonGroup(size = OblyxElementSize.SM, label = "Zoom") {
  oblyxButton { +"-" }
  oblyxButton { +"+" }
}
oblyxButtonGroup(size = OblyxElementSize.LG, label = "Zoom") {
  oblyxButton { +"-" }
  oblyxButton { +"+" }
}

Mixed content

Buttons keep their own variant, disabled, and icon-only state inside a group. The group only ever affects layout, the seam, and (optionally) size.

Grouped buttons with an icon-only trailing button

Save

...

HTML

Kotlin

<oblyx-button-group label="Save options">
  <oblyx-button variant="primary">Save</oblyx-button>
  <oblyx-button variant="primary" icon-only label="More save options">...</oblyx-button>
</oblyx-button-group>

oblyxButtonGroup(label = "Save options") {
  oblyxButton(variant = OblyxButtonVariant.PRIMARY) { +"Save" }
  oblyxButton(variant = OblyxButtonVariant.PRIMARY, iconOnly = true, label = "More save options") { +"..." }
}

A disabled button inside a group

Edit

Accessible name

label is optional. Set it and the group renders a role="group" region with that name, so assistive technology announces the buttons as one related set rather than a handful of unrelated controls. Leave it unset and the group renders no role at all: an unnamed role="group" has nothing to announce, so it is left off rather than emitted as dead weight in the accessibility tree. Most button groups are self-explanatory from their own buttons and do not need a label; set it when the set of buttons acts as one named control, such as a "Text alignment" or "Zoom" group.

Reference

`<oblyx-button-group>`

Attribute	Type	Default	Description
`orientation`	`horizontalvertical`	`horizontal`	Layout axis.
`size`	`smmdlg`	–	Size tier cascaded to every child `<oblyx-button>` via CSS, overriding each button's own `size`. Unset (the default) leaves every child's own `size` alone, so a group with no `size` set is just a layout container.
`label`	`string \| undefined`	–	Accessible name for the group, exposed via `aria-label` on a `role="group"` region. Optional: a button group is often purely presentational (grouping "Save"/"Cancel", or a toolbar whose buttons are self-explanatory), and in that case it has no accessible name and no `role`, the normal and correct state for a layout-only wrapper. Set it when the group itself needs an announced name, such as a set of alignment or zoom buttons acting as one control.