Updated
Toolbar
Toolbar holds the actions for the current screen, anchored to the bottom of it. Two to four icon actions, and one filled primary when the screen has a next step.
Updated
Preview
Actions for the current screen, anchored to the bottom. Two to four, plus an optional primary.
The only stroke runs along the top and the corners are square, because this is the bottom edge of a screen. Icons sit on the left and the right holds a filled primary, or nothing.
A toolbar changes with the screen, and Navigation stays the same across screens.
How many actions can a Toolbar hold?
Two, three or four icon actions. Without a primary they spread across the full width of the bar.
The icons ship in a fixed order, share-2, bookmark, folder and trash-2, and each Button takes its own icon, so replace them with yours. The buttons are Neutral Link, Icon Only, which means no fill and no border: the 44 square is a target with no visible shape.
Can a Toolbar have a primary action?
Yes, one filled action on the right, or none. With a primary the icons stay together on the left and the plus sits at the end.
The primary is the only filled thing on the bar, and on Android it is the FAB. It is a Button, so Pressed and Focused come from Button: press an icon in the specimen to see the pressed fill, and tab to one to see the focus ring.
How does Toolbar differ on iOS and Material 3?
Toolbar is one flat bar for both platforms. The Apple pages draw the iOS toolbar as glass groups, and the Material 3 pages in the file have no bottom bar.
| Appetite UI component | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Toolbar, 340 x 62, Actions 2 to 4 | iOS / Toolbar, a floating glass bar of icon groups, Items 2 to 5 | Bottom app bar with a floating action button, not drawn in the file | Appetite UI is a flat bar with a top hairline and square corners. iOS floats the actions on glass. The Appetite UI primary is the Material FAB |
| Primary, 44 | The trailing group of the iOS toolbar | Floating action button | Appetite UI keeps the primary inside the bar |
The minimum touch target is 44 on iOS and 48 on Android, from platform/min-touch-target. Every button on the bar is 44, so it meets the iOS minimum and sits 4 under the Android one.
For a Compose build, pad each hit area to 48 and keep the drawn button at 44. In code the bar is a BottomAppBar on Android, with the primary as its FAB.
See Platform Bridge. The vertical Duo toolbar is on the iOS page.
Properties
Two axes and six variants. The icons are the ones inside each Button.
| Property | Type | Default |
|---|---|---|
Actions | 2, 3, 4 | 2 |
Primary | False, True | False |
| Part | What it is | Size |
|---|---|---|
Actions | A row at x 8, gap 4 with a primary, spread over the bar without one | 92, 140 or 188, or 324 spread |
Button, action | Button instance, Neutral Link md, Icon Only | 44 x 44 |
Button, primary | Button instance, Brand Filled md, Icon Only | 44 x 44 |
Each variant holds as many action buttons as its Actions value, plus the primary where Primary is True, and the buttons are the only layers that carry an icon. The bar has no states of its own, only the Button presses inside it, and no label variant, so it is icon only.
Build an unavailable action yourself with the Disabled state of Button.
Tokens
Five colors. 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 |
The bar is welded to the bottom of the screen, and 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 for that material.
When should I use a Toolbar?
Use it for actions on the current screen, and move it out of the way when that screen changes.
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.
Section links belong in Navigation. Four actions is the ceiling, so put the overflow in a Context Menu behind an ellipsis.
Keep the destructive action away from the primary.