Split button

A primary action with a menu of alternatives.

Run and export CSV Explain query

<mm-split-button label="Run query" icon="play-arrow" menu-label="More run options">
  <mm-menu>
    <mm-menu-item icon="download" value="run-export">Run and export CSV</mm-menu-item>
    <mm-menu-item icon="account-tree" value="explain">Explain query</mm-menu-item>
  </mm-menu>
</mm-split-button>

Guidance

A split button pairs one primary action with a chevron menu of close alternatives: "Run query" with "Run and export CSV" and "Explain query". The two parts share one border and join with square inner corners; each has its own focus ring and tab stop. Use it only when the main action is clearly the common case. If the alternatives are equally likely, use a menu button instead.

The chevron follows the menu button keyboard model (https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/).

Properties

Property	Attribute	Type	Default	Description
variant	variant	'primary' | 'secondary'	'primary'	primary (default) or secondary.
size	size	'md' | 'sm'	'md'	md (default) or sm.
label	label	string	''	Text of the primary action, a verb and an object.
icon	icon	string	''	Leading icon of the primary action.
menuLabel	menu-label	string	''	Accessible name of the chevron. Defaults to "More actions"; name the alternatives where you can ("More run options").
groupLabel	group-label	string	''	Accessible name of the group. Defaults to label.
disabled	disabled	boolean	false
loading	loading	boolean	false	Shows a spinner on the primary part and blocks it; the menu stays available.
toggle		MmMenuButton | null		The chevron menu button.

Events

Event	Detail	Description
mm-action	CustomEvent<Record<string, never>>	The primary part was activated.

Slots

Slot	Description
Default	One mm-menu holding the alternatives.

CSS parts

Part	Description
action	The primary mm-button.
toggle	The chevron mm-menu-button.

Examples

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