# Toolbar

> A toolbar is a bar of actions for the current view, placed at the bottom or top edge. iOS calls it a Toolbar and Material 3 has the bottom app bar, which can carry a floating action button.

Page: https://www.appetiteui.com/glossary/toolbar. Toolbar vs bottom app bar: iOS and Material 3. Also called Bottom app bar, Action bar.

## Why it matters

A toolbar puts the common actions of a view in one place. Apple’s warning is overcrowding: people must be able to tell the items apart and hit each one, so the rest goes into a menu.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Toolbar | Bottom app bar | Toolbar |
| Items in the file | Groups of two to five icons on glass | Bottom app bar, not drawn in the file | See below |
| Height and elevation (Material Components) | Set by the system | 80 dp minimum height, 3 dp elevation | See below |
| Tab bar height | 49 pt | 64 dp | `platform/bar/bottom-height` |

## In Appetite UI

Toolbar is 340 by 62 with two to four actions, flat with a top hairline and square corners, where iOS floats the actions on glass. The kit’s primary action is 44 and sits inside the bar, in the place of the Material floating action button.

## Example

A mail view has a toolbar with Reply, Archive, Delete and More. The less common commands move into the More menu, so the four stay easy to hit.

## Common mistakes

- Filling the bar to the edges. Keep to a few items and move the rest into a menu.
- Adding an overflow menu by hand where the system adds one.
- Mixing icon-only and text items without need.
- Putting a floating action button over the bar on iOS.

## Questions

### What is the difference between a toolbar and a tab bar?

A tab bar moves between destinations of the app. A toolbar holds actions on the current view. They can both sit at the bottom of the screen.

### What is the Material 3 equivalent of the iOS toolbar?

The bottom app bar, which holds actions and can carry a floating action button. In Material Components for Android it is 80 dp high.

## Sources

1. [Apple Human Interface Guidelines: Toolbars](https://developer.apple.com/design/human-interface-guidelines/toolbars)
2. [Material Design 3: Bottom app bar](https://m3.material.io/components/bottom-app-bar/overview)
3. [Material Components for Android: Bottom app bar](https://github.com/material-components/material-components-android/blob/master/docs/components/BottomAppBar.md)

## Related

- Docs: [Toolbar](https://www.appetiteui.com/docs/toolbar)
- Docs: [Top Bars](https://www.appetiteui.com/docs/top-bars)
- Article: [iOS vs Material 3: what changes per component](https://www.appetiteui.com/blog/ios-vs-material-3-components)
- Glossary: [Tab bar](https://www.appetiteui.com/glossary/tab-bar)
- Glossary: [Floating action button](https://www.appetiteui.com/glossary/floating-action-button)
- Glossary: [Top app bar](https://www.appetiteui.com/glossary/top-app-bar)