Skip to content
Components
/
Toolbar
Dark

Toolbar

Toolbar holds the actions for the current screen, anchored to the bottom of it.

Preview

Actions for the current screen, anchored to the bottom. Two to four, plus an optional primary.

Actions 2 with Primary False, then Actions 4 with Primary True
340 x 62, radius 0, a 1px border on the top edge only

The only stroke runs along the top and the corners are square: this is the bottom edge of a screen, not a card. Actions sit left, the right holds a filled primary or nothing. It is not Navigation. A toolbar changes with the screen, navigation does not.

Actions

Two, three or four. The row grows to the right, the bar does not move.

Actions 2, then 3, then 4, all at Primary False
row 92, 140 and 188 wide at gap 4, buttons 44 square

The icons ship in a fixed order, share-2, bookmark, folder and trash-2. Each is an instance swap. Replace them. The buttons are Neutral Link, Icon Only, so they carry no fill and no border: the 44 square is a target, not a visible shape.

Primary

One filled action on the right, or a one pixel spacer where it would have been.

Primary False then Primary True, both at Actions 4
primary 44 square at x 288, spacer 1 x 44 at x 331

The primary is the only filled thing on the bar, and on Android it is the FAB. Turning it off does not delete it: the file swaps in a 1 wide frame named Spacer, so space between still has something to push against. It renders as nothing.

Properties

Two axes, six variants, and five icon slots that are always present.

Property
Type
Default
Actions
2 | 3 | 4
2
Primary
False | True
False
Icon 1 to Icon 5
Instance swap, 4 preferred values each
share-2, bookmark, folder, trash-2, plus
Part
What it is
Size
Actions
A hugging row at x 8, gap 4
92, 140 or 188
Button, action
Button instance, Neutral Link md, Icon Only
44 x 44
Button, primary
Button instance, Brand Filled md, Icon Only
44 x 44
Spacer
A frame, on the Primary False variants only
1 x 44

All five icon slots sit on every variant, so at two actions the third and fourth swaps stay in the panel and change nothing. No states: no pressed, no disabled, no selected. Build an unavailable action yourself. No label variant either, so the bar is icon only.

Tokens

Five colours. No shadow, no radius, no elevation.

Token
Light
Dark
Applied to
bg/white-0
#FFFFFF
#0E0E0F
The bar
border/soft-100
#E9E9EA
#2F2F31
The top edge, 1px inside
fg/sub-700
#48484A
#C7C7CC
Action icons
brand/base
#155DFC
#2B7FFF
Primary fill
static/static-white-0
#FFFFFF
#FFFFFF
The plus, one value in both modes

No shadow, no radius. The bar is welded to the bottom of the screen; the top hairline is its only separation from the content above. On iOS it sits over the home indicator and the SDK takes over with Liquid Glass, so treat the flat fill as a placeholder, not a finished material.

Guidelines

Do

One filled button, on the right, doing the thing this screen is for. Everything to the left of it is a supporting action on the same content.

Don't

Do not fill a second button. Two filled circles is two primaries, and the bar stops telling anyone what the next step is.

Use it for actions on the current screen, and move it out of the way when that screen changes. Section links belong in Navigation. Four actions is the ceiling; put the overflow in a Context Menu behind an ellipsis. Keep the destructive action away from the primary. The file draws 44, so give every target 48 on Android.