Toolbar

A toolbar holds the controls that act on the view under it. It stays on one line, and when room runs out its least used controls step aside first.

Example

A board's toolbar starts with its views and its search and ends with the one action that adds to the board. The formatting bar of an email works the same way for text.

When to use it

Use a toolbar for the controls people reach for again and again on the view in front of them, and keep it at the top of that view.

Moving between places belongs to the header, the side navigation or tabs. Settings used once a month belong behind More, or on a settings screen.

Anatomy

Controls sit in up to three groups: the views, the tools, and last the one action that adds, such as Add candidate. The room left over stays at the end of the row.

Space separates the groups. A thin divider joins in only between groups of icon buttons, where space alone does not read.

Control height: 36 px, 44 px on touch
Radius: 8 px; --radius-lg
Space between controls: 8 px, 6 px below 640 px; --space-2
Label: 13 px, weight 500
Icon: 16 px
Divider: 1 by 20 px; --border
Search field: At least 200 px, 320 px when there is room

When room runs out

Each toolbar declares the order in which its controls give way. When the row runs short, the next control on that list moves behind More and comes back when there is room again. The views, the search and the add action stay.

More shows how many controls are behind it. A toolbar responds to the room it has, so opening a side panel can move controls behind More.

Below 640 px, a formatting toolbar may wrap onto a second line. A toolbar does not scroll sideways.

More: 36 px, icon and count

States

On a board, the tools rest on a faint fill. A pressed one, such as Assigned to me, takes a light brand tint, and the view in use takes the control gray.

In a formatting bar the tools have no fill at rest, and a pressed style such as Bold takes the selected gray.

Tool at rest on a board: Faint fill, muted ink; --glass-fill-hover
Tool at rest in a formatting bar: No fill, muted ink; --text-muted
Hover: Full ink, and the faint fill where there was none; --text
Pressed tool on a board: Brand blue at 15 percent, brand ink; --brand-ink
View in use: Control gray, text ink; --surface-control
Pressed in a formatting bar: Selected gray, text ink; --seg-selected
Focus: 2 px ring, 2 px offset; --focus-ring
Unavailable: Stays in place at 50 percent opacity

Keyboard and screen readers

A toolbar has a name that says what it acts on, such as Board tools or Formatting. The controls share one Tab stop and the arrow keys move between them. The search field has a Tab stop of its own, so its arrow keys keep moving the caret. Icon only controls carry a name and a tooltip in the same words.

Tab: Enters at the last used control, then leaves
Left and Right arrows: Move between controls
Home and End: Jump to the first or last control
Enter or Space: Uses the focused control

Permitted and not permitted

Permitted

One action that adds, after the tools
Add candidate, Publish job.
A count on More
People see that controls moved, and how many.

Not permitted

A second row of tools on a wide screen
Let controls give way in their declared order.
Shrinking labels to icons to save room
Toolbars then look different from board to board.
Delete beside everyday tools
Keep destructive actions in their own group, away from the add action.

NextField

Toolbar

A named row of controls that act on the view under it, kept on one line by moving controls behind More in a declared order.

Kind: component
Page: https://design.werklist.com/components/toolbar
Version: 2.1.2

When to use it

Board toolbars: views, search, filters, the add action.
Formatting bars in editors and composers.
Selection bars that act on chosen rows.

When not to use it

Navigation between places: header, side navigation, tabs.
Rarely used settings in the row: put them behind More or in settings.
A title or a hero above the toolbar or inside it: a view starts at its toolbar.

Rules

Each toolbar declares the order in which its controls give way. The view switch, the search and the add action never give way.
A control comes back once there is clear room for it.
A toolbar responds to the room it has, so opening a side panel can move controls behind More.
A toolbar does not wrap and does not scroll sideways. A formatting toolbar may wrap below 640 px.
Destructive actions in their own group.

Anatomy

Container: role toolbar with aria-label. No fill of its own. It stands on the frame of a board (--surface-1) or the well of a composer.
Control: Labeled controls are small buttons, 36 px high. Icon only controls are small icon buttons, 32 px, centered on the row. Both are drawn at 44 px on coarse pointers. (--radius-lg)
Label and icon: 13 px, weight 500. Icon 16 px, 8 px before the label.
Gap: 8 px between controls, 6 px below 640 px (--space-2)
Groups: At most three, in order: leading (the view switch), tools, trailing (the one add action, right after the tools). The room left over stays at the end of the row.
Divider: 1 by 20 px, only between groups of icon only controls, aria-hidden (--border)
Search field: Outside the group of arrow keys, with its own Tab stop. At least 200 px, 320 px when there is room.
More: 36 px, the More icon and the count. The count is aria-hidden and joins the name: More, 2.

States

Rest, board: Tools: quiet buttons on the --glass-fill-hover fill, in --text-muted ink (--glass-fill-hover, --text-muted)
Rest, formatting: No fill, --text-muted ink (--text-muted)
Hover: --text ink. In a formatting bar the tool also takes --glass-fill-hover. Only on a pointer that can hover. (--glass-fill-hover, --text)
Pressed, board tool: aria-pressed true: --brand-blue at 15 percent as the fill, --brand-ink as the ink (--brand-blue, --brand-ink)
View in use, board: aria-pressed true in the leading group: --surface-control fill, --text ink (--surface-control, --text)
Pressed, formatting: aria-pressed true: --seg-selected fill, --text ink (--seg-selected, --text)
Focus: 2 px ring, 2 px offset (--focus-ring)
Unavailable: aria-disabled true, opacity 0.5. It stays in place and in the group.
Behind More: The control waits in the row that More opens and keeps its state.

Keyboard

Tab: Enters the toolbar at the last used control. The next Tab leaves it.
Left arrow, Right arrow: Previous or next control
Home, End: First or last control
Enter, Space: Uses the control
Down arrow: Opens a menu control

Accessibility

role toolbar with aria-label naming what it acts on.
The controls share one Tab stop and the arrow keys move between them. The search field has a Tab stop of its own.
Icon only controls: aria-label and a tooltip with the same words.
Toggles: aria-pressed.
More: aria-expanded and a name that includes the count.

Content

Labels are short verbs or nouns in sentence case, no end punctuation: Filter, Group by, Export, Add candidate.
The add action names what it adds: Add candidate, Add task.

Tokens

--radius-lg
--space-2
--border
--glass-fill-hover
--text
--text-muted
--brand-ink
--surface-control
--seg-selected
--brand-blue
--focus-ring

JSON

{
  "title": "Toolbar",
  "path": "/components/toolbar",
  "url": "https://design.werklist.com/components/toolbar",
  "text": "https://design.werklist.com/agent/components/toolbar",
  "summary": "A row of controls that act on what is under it, such as a board of candidates or an email you are writing.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Toolbar",
  "purpose": "A named row of controls that act on the view under it, kept on one line by moving controls behind More in a declared order.",
  "use": [
    "Board toolbars: views, search, filters, the add action.",
    "Formatting bars in editors and composers.",
    "Selection bars that act on chosen rows."
  ],
  "avoid": [
    "Navigation between places: header, side navigation, tabs.",
    "Rarely used settings in the row: put them behind More or in settings.",
    "A title or a hero above the toolbar or inside it: a view starts at its toolbar."
  ],
  "anatomy": [
    {
      "part": "Container",
      "measure": "role toolbar with aria-label. No fill of its own. It stands on the frame of a board (--surface-1) or the well of a composer.",
      "token": ""
    },
    {
      "part": "Control",
      "measure": "Labeled controls are small buttons, 36 px high. Icon only controls are small icon buttons, 32 px, centered on the row. Both are drawn at 44 px on coarse pointers.",
      "token": "--radius-lg"
    },
    {
      "part": "Label and icon",
      "measure": "13 px, weight 500. Icon 16 px, 8 px before the label.",
      "token": ""
    },
    {
      "part": "Gap",
      "measure": "8 px between controls, 6 px below 640 px",
      "token": "--space-2"
    },
    {
      "part": "Groups",
      "measure": "At most three, in order: leading (the view switch), tools, trailing (the one add action, right after the tools). The room left over stays at the end of the row.",
      "token": ""
    },
    {
      "part": "Divider",
      "measure": "1 by 20 px, only between groups of icon only controls, aria-hidden",
      "token": "--border"
    },
    {
      "part": "Search field",
      "measure": "Outside the group of arrow keys, with its own Tab stop. At least 200 px, 320 px when there is room.",
      "token": ""
    },
    {
      "part": "More",
      "measure": "36 px, the More icon and the count. The count is aria-hidden and joins the name: More, 2.",
      "token": ""
    }
  ],
  "states": [
    {
      "name": "Rest, board",
      "change": "Tools: quiet buttons on the --glass-fill-hover fill, in --text-muted ink",
      "tokens": [
        "--glass-fill-hover",
        "--text-muted"
      ]
    },
    {
      "name": "Rest, formatting",
      "change": "No fill, --text-muted ink",
      "tokens": [
        "--text-muted"
      ]
    },
    {
      "name": "Hover",
      "change": "--text ink. In a formatting bar the tool also takes --glass-fill-hover. Only on a pointer that can hover.",
      "tokens": [
        "--glass-fill-hover",
        "--text"
      ]
    },
    {
      "name": "Pressed, board tool",
      "change": "aria-pressed true: --brand-blue at 15 percent as the fill, --brand-ink as the ink",
      "tokens": [
        "--brand-blue",
        "--brand-ink"
      ]
    },
    {
      "name": "View in use, board",
      "change": "aria-pressed true in the leading group: --surface-control fill, --text ink",
      "tokens": [
        "--surface-control",
        "--text"
      ]
    },
    {
      "name": "Pressed, formatting",
      "change": "aria-pressed true: --seg-selected fill, --text ink",
      "tokens": [
        "--seg-selected",
        "--text"
      ]
    },
    {
      "name": "Focus",
      "change": "2 px ring, 2 px offset",
      "tokens": [
        "--focus-ring"
      ]
    },
    {
      "name": "Unavailable",
      "change": "aria-disabled true, opacity 0.5. It stays in place and in the group.",
      "tokens": []
    },
    {
      "name": "Behind More",
      "change": "The control waits in the row that More opens and keeps its state.",
      "tokens": []
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Enters the toolbar at the last used control. The next Tab leaves it."
    },
    {
      "key": "Left arrow, Right arrow",
      "action": "Previous or next control"
    },
    {
      "key": "Home, End",
      "action": "First or last control"
    },
    {
      "key": "Enter, Space",
      "action": "Uses the control"
    },
    {
      "key": "Down arrow",
      "action": "Opens a menu control"
    }
  ],
  "accessibility": [
    "role toolbar with aria-label naming what it acts on.",
    "The controls share one Tab stop and the arrow keys move between them. The search field has a Tab stop of its own.",
    "Icon only controls: aria-label and a tooltip with the same words.",
    "Toggles: aria-pressed.",
    "More: aria-expanded and a name that includes the count."
  ],
  "content": [
    "Labels are short verbs or nouns in sentence case, no end punctuation: Filter, Group by, Export, Add candidate.",
    "The add action names what it adds: Add candidate, Add task."
  ],
  "rules": [
    "Each toolbar declares the order in which its controls give way. The view switch, the search and the add action never give way.",
    "A control comes back once there is clear room for it.",
    "A toolbar responds to the room it has, so opening a side panel can move controls behind More.",
    "A toolbar does not wrap and does not scroll sideways. A formatting toolbar may wrap below 640 px.",
    "Destructive actions in their own group."
  ],
  "tokens": [
    "--radius-lg",
    "--space-2",
    "--border",
    "--glass-fill-hover",
    "--text",
    "--text-muted",
    "--brand-ink",
    "--surface-control",
    "--seg-selected",
    "--brand-blue",
    "--focus-ring"
  ]
}

Raw file: https://design.werklist.com/agent/components/toolbar