#Toolbar

A Toolbar groups compact, frequently used commands. It supports horizontal scrolling, wrapped layouts, logical separators, and dense Office-style controls.

npm install github:A3S-Lab/UI#d2799d3914d2d291fbf0c2c3e638e2380ce266c0

<div class="toolbar" role="toolbar" aria-label="Formatting">
  <div role="group" aria-label="Text style">...</div>
  <hr role="separator" />
  <div role="group" aria-label="Insert">...</div>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<div class="toolbar" role="toolbar" aria-label="Formatting">
  <div role="group" aria-label="Text style">...</div>
  <hr role="separator" />
  <div role="group" aria-label="Insert">...</div>
</div>

#Parameters

#States and variants

Use aria-pressed for toggle buttons and disabled for unavailable commands. A compact toolbar is appropriate inside Ribbons; wrapping is appropriate in responsive inspector panels.

#Accessibility

Name the toolbar and each ambiguous group. Native buttons remain in the document tab sequence. Provide keyboard shortcuts at the application layer and expose them with Kbd or tooltip text.