Button group

Groups related buttons, spaced or attached.

<mm-button-group label="Zoom" attached>
  <mm-button variant="secondary" icon="zoom-out" label="Zoom out"></mm-button>
  <mm-button variant="secondary" icon="fit-screen" label="Fit to view"></mm-button>
  <mm-button variant="secondary" icon="zoom-in" label="Zoom in"></mm-button>
</mm-button-group>

Guidance

A button group gathers related buttons under one label: view switches in a toolbar, zoom controls on the lineage canvas. Spaced groups sit space-2 apart; attached groups join the buttons edge to edge with one shared border and square inner corners, and each button keeps its own focus ring and tab stop. For one choice among options, use a segmented control instead.

https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/ covers arrow-key toolbars; a button group is a plain role="group" and every button stays in the tab order.

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	Accessible name of the group, such as "Zoom" or "Lineage view".
orientation	orientation	'horizontal' | 'vertical'	'horizontal'	horizontal (default) or vertical.
attached	attached	boolean	false	Joins the buttons edge to edge with one shared border.

Slots

Slot	Description
Default	mm-button and mm-menu-button elements.

Examples

Every state of mm-button-group in Storybook, with keyboard and screen reader tests.