Toolbar

A row of controls that act on one surface.

… Read only … Run query

<mm-toolbar label="Query editor" dense>
  <mm-select label="Source" hide-label value="snowflake-prod">…</mm-select>
  <mm-status-pill status="neutral" icon="lock">Read only</mm-status-pill>
  <mm-toolbar-separator></mm-toolbar-separator>
  <mm-select label="Row limit" hide-label value="1000">…</mm-select>
  <mm-button slot="end" variant="primary" icon="play-arrow">Run query</mm-button>
</mm-toolbar>

Guidance

Toolbars group the controls that act on one surface, such as the query editor's source select, "Read only" status, row limit and Run query. They are chrome, so they stay quieter than the content they frame: no fill, no border, controls separated by space-2 and hairline separators.

Keyboard follows the WAI-ARIA toolbar pattern (https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/): the toolbar is one tab stop; Left and Right (Up and Down when vertical) move between controls, flipped in right-to-left, and Home and End go to the first and last. Focus returns to the last control used. Controls that use arrow keys themselves keep them: text fields keep Left, Right, Home and End for the caret, an mm-select opens on Home and End, and an mm-segmented-control moves its own selection with arrows, so place a segmented control at either end of a toolbar where you can. Disabled controls are skipped.

Put controls in the default slot (start) and the end slot; the gap between them flexes. dense sets 30px controls through --mm-control. label is required: it names the toolbar.

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	Accessible name, such as "Query editor". Required.
orientation	orientation	'horizontal' | 'vertical'	'horizontal'	horizontal (default) or vertical.
dense	dense	boolean	false	30px controls.
items		HTMLElement[]		The controls the toolbar moves between, in order.

Slots

Slot	Description
Default	Controls at the start.
end	Controls at the end, such as the primary action.

CSS parts

Part	Description
start	The start group.
end	The end group.

Examples

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