Browse Components

Toolbar

A compact surface for related actions with arrow-key navigation.

Basic

Related project actions in one surface. Use arrow keys to move between available buttons. Set dir="rtl" on the toolbar or a parent to use a right-to-left layout.

View Code

<div class="toolbar" role="toolbar" aria-label="Project actions">
  <button class="btn ghost btn-icon" type="button" aria-label="New Project">
    <span class="icon" data-icon="plus" aria-hidden="true">
    </span>
  </button>
  <button class="btn ghost btn-icon" type="button" aria-label="Open Project">
    <span class="icon" data-icon="folder" aria-hidden="true">
    </span>
  </button>
  <span class="toolbar-separator" aria-hidden="true">
  </span>
  <button class="btn ghost btn-icon" type="button" aria-label="Undo" disabled>
    <span class="icon" data-icon="undo" aria-hidden="true">
    </span>
  </button>
  <button class="btn ghost btn-icon" type="button" aria-label="Download">
    <span class="icon" data-icon="download" aria-hidden="true">
    </span>
  </button>
</div>

Sizes

Compact 28px, default 32px, and roomy 36px controls scale with their icons. All sizes keep 44px touch targets on touch devices.

View Code

<div class="stack">
  <div class="toolbar toolbar-small" role="toolbar" aria-label="small project actions">
    <button class="btn ghost btn-icon" type="button" aria-label="New Project">
      <span class="icon" data-icon="plus" aria-hidden="true">
      </span>
    </button>
    <button class="btn ghost btn-icon" type="button" aria-label="Open Project">
      <span class="icon" data-icon="folder" aria-hidden="true">
      </span>
    </button>
    <span class="toolbar-separator" aria-hidden="true">
    </span>
    <button class="btn ghost btn-icon" type="button" aria-label="Undo" disabled>
      <span class="icon" data-icon="undo" aria-hidden="true">
      </span>
    </button>
    <button class="btn ghost btn-icon" type="button" aria-label="Download">
      <span class="icon" data-icon="download" aria-hidden="true">
      </span>
    </button>
  </div>
  <div class="toolbar" role="toolbar" aria-label="Default project actions">
    <button class="btn ghost btn-icon" type="button" aria-label="New Project">
      <span class="icon" data-icon="plus" aria-hidden="true">
      </span>
    </button>
    <button class="btn ghost btn-icon" type="button" aria-label="Open Project">
      <span class="icon" data-icon="folder" aria-hidden="true">
      </span>
    </button>
    <span class="toolbar-separator" aria-hidden="true">
    </span>
    <button class="btn ghost btn-icon" type="button" aria-label="Undo" disabled>
      <span class="icon" data-icon="undo" aria-hidden="true">
      </span>
    </button>
    <button class="btn ghost btn-icon" type="button" aria-label="Download">
      <span class="icon" data-icon="download" aria-hidden="true">
      </span>
    </button>
  </div>
  <div class="toolbar toolbar-large" role="toolbar" aria-label="large project actions">
    <button class="btn ghost btn-icon" type="button" aria-label="New Project">
      <span class="icon" data-icon="plus" aria-hidden="true">
      </span>
    </button>
    <button class="btn ghost btn-icon" type="button" aria-label="Open Project">
      <span class="icon" data-icon="folder" aria-hidden="true">
      </span>
    </button>
    <span class="toolbar-separator" aria-hidden="true">
    </span>
    <button class="btn ghost btn-icon" type="button" aria-label="Undo" disabled>
      <span class="icon" data-icon="undo" aria-hidden="true">
      </span>
    </button>
    <button class="btn ghost btn-icon" type="button" aria-label="Download">
      <span class="icon" data-icon="download" aria-hidden="true">
      </span>
    </button>
  </div>
</div>

Calendar filters

Toggle the calendars you want to show. Each filter is independent.

View Code

<div class="toolbar" role="toolbar" aria-label="Calendar filters">
  <button class="btn ghost" type="button" data-toggle aria-pressed="true">
    Work
  </button>
  <button class="btn ghost" type="button" data-toggle aria-pressed="false">
    Personal
  </button>
  <button class="btn ghost" type="button" data-toggle aria-pressed="false">
    Reminders
  </button>
</div>

Icon actions

Tooltips name each action on hover or keyboard focus.

View Code

<div class="toolbar" role="toolbar" aria-label="Workspace actions">
  <button
    class="btn ghost btn-icon"
    type="button"
    aria-label="New"
    data-tooltip="top"
    aria-describedby="toolbar-tip-plus"
  >
    <span class="icon" data-icon="plus" aria-hidden="true">
    </span>
  </button>
  <span class="tooltip" id="toolbar-tip-plus" role="tooltip" popover="manual">
    New
  </span>
  <button
    class="btn ghost btn-icon"
    type="button"
    aria-label="Open"
    data-tooltip="top"
    aria-describedby="toolbar-tip-folder"
  >
    <span class="icon" data-icon="folder" aria-hidden="true">
    </span>
  </button>
  <span class="tooltip" id="toolbar-tip-folder" role="tooltip" popover="manual">
    Open
  </span>
  <button
    class="btn ghost btn-icon"
    type="button"
    aria-label="Design"
    data-tooltip="top"
    aria-describedby="toolbar-tip-settings"
  >
    <span class="icon" data-icon="settings" aria-hidden="true">
    </span>
  </button>
  <span class="tooltip" id="toolbar-tip-settings" role="tooltip" popover="manual">
    Design
  </span>
  <button
    class="btn ghost btn-icon"
    type="button"
    aria-label="Download"
    data-tooltip="top"
    aria-describedby="toolbar-tip-download"
  >
    <span class="icon" data-icon="download" aria-hidden="true">
    </span>
  </button>
  <span class="tooltip" id="toolbar-tip-download" role="tooltip" popover="manual">
    Download
  </span>
</div>

Vertical

A compact rail with Up and Down keyboard navigation.

View Code

<div
  class="toolbar"
  role="toolbar"
  aria-label="Project actions"
  aria-orientation="vertical"
>
  <button class="btn ghost btn-icon" type="button" aria-label="New Project">
    <span class="icon" data-icon="plus" aria-hidden="true">
    </span>
  </button>
  <button class="btn ghost btn-icon" type="button" aria-label="Open Project">
    <span class="icon" data-icon="folder" aria-hidden="true">
    </span>
  </button>
  <span class="toolbar-separator" aria-hidden="true">
  </span>
  <button class="btn ghost btn-icon" type="button" aria-label="Undo" disabled>
    <span class="icon" data-icon="undo" aria-hidden="true">
    </span>
  </button>
  <button class="btn ghost btn-icon" type="button" aria-label="Download">
    <span class="icon" data-icon="download" aria-hidden="true">
    </span>
  </button>
</div>