Toolbar

A grouping of controls using <menu role="toolbar"> with @utility toolbar-* classes.

Usage

toolbar.html

<menu role="toolbar" aria-label="Text Formatting" class="toolbar">
  <li>
    <button type="button" class="btn btn-ghost btn-icon color-group-neutral" aria-label="Bold">
      <Bold size={18} />
    </button>
  </li>
  <li>
    <button type="button" class="btn btn-ghost btn-icon color-group-neutral" aria-label="Italic">
      <Italic size={18} />
    </button>
  </li>
  <li>
    <button type="button" class="btn btn-ghost btn-icon color-group-neutral" aria-label="Underline">
      <Underline size={18} />
    </button>
  </li>
  <li aria-hidden="true" class="toolbar-divider"></li>
  <li>
    <button type="button" class="btn btn-ghost btn-icon color-group-neutral" aria-label="Align Left">
      <AlignLeft size={18} />
    </button>
  </li>
  <li>
    <button type="button" class="btn btn-ghost btn-icon color-group-neutral" aria-label="Align Center">
      <AlignCenter size={18} />
    </button>
  </li>
</menu>