Toolbar | Lime design system

Examples

On a transaction

Repeat turned on

When to use it

Use: Controls that act on the same thing: receipt, split and repeat on a transaction.
Use: Filters above a list, such as Income and Spending.
Use: Four or more small controls that would add four tab stops.
Not for: One or two separate actions. Use Button.
Not for: Choosing one value from a short list. Use Segmented.
Not for: Commands behind one button. Use Dropdown menu.
Not for: Site navigation. Use links in a nav element.

7 rules

Must: Give an icon-only item an aria-label. Because a screen reader reads "button" with no name for an icon item.
Must: Give the Toolbar an aria-label such as "Transaction tools". Because with two toolbars on a screen, a screen reader hears "toolbar" twice and cannot tell them apart.
Should: Label a text item with one word, such as Split or Hide.
Never: Build site navigation as a toolbar; links need their own tab stops. Because a toolbar is one tab stop with arrow keys, and its buttons never show in the links list.
Must: Move rare items past about eight into a Dropdown menu. Because the track does not wrap; it scrolls sideways, and the last items hide past the edge.
Must: Use ToolbarToggle for an on or off setting; it sets aria-pressed and the lime wash. Because a ToolbarButton has no pressed state, so nobody can tell the Income filter is on.
Should: Run a slow command from a Button with pending outside the toolbar; items show no progress.

4 checks

: Toolbar is role toolbar: one Tab stop, arrows move between items, and loopFocus wraps at the ends.
: A toggle reports aria-pressed; the lime wash is a fill, so check a pressed toggle in forced colors.
: Arrow keys are mirrored in RTL by Base UI.
: Items are 32px tall; put phone controls in a larger Button row.

6 edge cases

Long item text: Items stay nowrap and the toolbar scrolls sideways at the container width.
Narrow container: The toolbar scrolls sideways inside its pill instead of wrapping.
Right to left: The row reverses; separator margins are symmetric.
Empty toolbar: A 40px grey pill; never render it.
Disabled item: Arrow keys skip it unless focusableWhenDisabled.
Tooltip on an item: It opens on keyboard focus as the arrows move.

4 props

10 tokens