Toolbar
A small raised sheet that holds a row of quiet controls.
On this page
A toolbar is a small raised sheet that holds a row of quiet controls. Its 4px inset makes the corners nest: the toolbar's corner is a small control's corner plus the inset, so small quiet buttons, selects and segmented controls sit in it concentrically. It is 40px tall around 32px controls.
Toolbar
<div class="toolbar" role="toolbar" aria-label="Formatting"> <button type="button" class="btn btn-quiet btn-square btn-sm" aria-label="Bold" aria-pressed="true"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z" /> </svg> </button> <button type="button" class="btn btn-quiet btn-square btn-sm" aria-label="Italic" aria-pressed="false"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M11 5h6M7 19h6M14 5l-4 14" /> </svg> </button> <button type="button" class="btn btn-quiet btn-square btn-sm" aria-label="Underline" aria-pressed="false"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M7 5v6a5 5 0 0 0 10 0V5M5 20h14" /> </svg> </button> <span class="toolbar-separator" role="separator" aria-orientation="vertical"></span> <button type="button" class="btn btn-quiet btn-sm"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1" /> </svg>Link</button></div>#State in a toolbar
A quiet button has no material until touched, so the toolbar's own sheet shows through. Under the pointer the button rises as a sheet of its own; pressed, or with aria-pressed="true", it sinks into a well. The toolbar is where the state order is easiest to see: well, sheet, raised.
#Floating
toolbar-floating lifts the toolbar onto the floating surface, for tools that sit over content: a selection bar, or the controls of an editor.
Floating
<div class="toolbar toolbar-floating" role="toolbar" aria-label="Selection"> <span class="px-xs text-sm fg-text-strong">3 selected</span> <span class="toolbar-separator" role="separator" aria-orientation="vertical"></span> <button type="button" class="btn btn-quiet btn-sm">Move</button> <button type="button" class="btn btn-quiet btn-sm">Archive</button> <button type="button" class="btn btn-quiet btn-sm btn-danger">Delete</button></div>#Accessibility
- Give the container
role="toolbar"and a label. - The toolbar pattern moves between controls with the arrow keys and keeps one tab stop. That needs a small script of the page's own; without it every control is a tab stop, which works and is only slower.
- Name icon-only buttons with
aria-label, and say toggles witharia-pressed.
#Classes
| Class | Description |
|---|---|
toolbar | The raised row, 40px tall around 32px controls, with a 4px inset |
toolbar-floating | On the floating surface, for tools that sit over content. With toolbar |
toolbar-separator | A short rule between groups of controls |
#Custom properties
| Property | Default | Description |
|---|---|---|
--toolbar-inset | 4px | Padding around the controls |