Toolbar

A group of controls with optional separators and vertical layout. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• toolbar, toolbar-group, toolbar-separator, toolbar--vertical

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<fieldset class="toolbar">
  <legend class="sr-only">Text formatting</legend>
  <div class="toolbar-group">
    <button type="button" aria-pressed="false">Bold</button>
    <button type="button" aria-pressed="false">Italic</button>
  </div>
  <span class="toolbar-separator" aria-hidden="true"></span>
  <div class="toolbar-group"><button type="button">Link</button></div>
</fieldset>

Variants and composition

toolbar–vertical stacks toolbar-group rows and turns direct toolbar-separator elements into horizontal rules. Nested toolbars keep their own orientation.

Horizontal toolbars scroll with nonshrinking groups. A conditional toolbar--vertical@md reaches direct separators; the groups themselves stay horizontal. Supply colors and reveal clipped focused controls when keyboard navigation changes focus.

Behavior and accessibility

The class adds layout and scrolling, not the ARIA toolbar keyboard model. A labelled fieldset with native Tab order works for ordinary controls; separators are decorative.

Reference

See the interactive Storybook specimen ↗. Continue to Tooltip or return to the Official preset overview.