For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/toolbar.md.
A3S UI
  • English
  • next

      • Toolbar

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

      Live previewHTML · CSS · JavaScript

      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

      ParameterValuesDefaultPurpose
      data-densitycompact, omittedomittedRemoves gaps inside command groups
      data-wraptrue, omittedomittedWraps groups instead of horizontal scrolling
      --toolbar-heightCSS length2.6875rem (43px)Office toolbar row height
      --toolbar-control-heightCSS length1.8125rem (29px)Compact command height
      role="toolbar"—RequiredAnnounces the composite command region
      Child role="group"—RecommendedNames related command sets
      <hr role="separator">—OptionalLogical visual division

      States and variants

      Use aria-pressed for toggle buttons and disabled for unavailable commands. The default row and command sizes match the A3S Office editor chrome. Commands never shrink in a narrow non-wrapping toolbar; keyboard focus scrolls the active command into view. 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.