iOS Toolbar Design Guide

A Toolbar is a very useful element when designing iOS apps. It presents shortcuts as buttons to perform actions that are relevant to the current view or context.

Note: Not to be confused with Tab Bar.

Button styles

Depending on the view, you might want to have icons or labels as buttons. So there are two types of Toolbar buttons that can be used:

Icons

Use icons when the action you want to display is absolutely clear when observing that icon. The maximum number of visible icons on the iPhone is 5, however, there can be more actions than that which will be hidden inside a “more” button, appearing as a menu. On the iPad, the maximum number of icons is 8.

Labels

The label buttons are more suited when an icon might not be enough to describe what will happen when the user presses a certain button. When creating a Toolbar with text, be careful with the labels, especially when localizing to other languages, so they don’t truncate. In this case, the maximum number of buttons is 3.

Anatomy

The Toolbar usually sits at the bottom of the view and consists of a translucent background with icons or text as buttons. The bar is always horizontal and takes up the entire width of the device. The basic elements that make up the Toolbar are:

Background

The background of the Toolbar is translucent, to give the blurred effect when content is behind it.

Icons or labels

This is the main element of the component. It’s where the user is going to interact. For icons, the line style is usually preferred.

Home indicator

On iPhones and iPads with no physical home buttons, the home indicator is also part of the Toolbar. No lines are separating the toolbar from the home indicator, they are unified through a material background.

Features

• Every main view has a toolbar that can be toggled on and off. The attributes assigned to the main view will be replicated on views attached to it. If the main view has a toolbar, all the other ones will have one too. However, it’s possible to have it without passing through the controller, which produces a higher level of customization.
• The safe area is something to be careful with because although the system one does not allow any overlapping with other tappable elements, a custom one might not have all the cases (display size, Accessibility features, etc) covered. Using the system toolbar you can guarantee that all the device constraints are covered.
• It’s not possible to set different spaces between toolbar elements. You can have fixed or flexible spaces, but in the end, the system will manage everything automatically and distribute the space equally.
• Depending on the user’s context, it is possible to temporarily hide the toolbar.

Wrap up

To conclude, Toolbars are essential components when it comes to performing quick actions to the current view. They can contain icons or text as buttons and are usually at the bottom of the screen.

We hope this article is useful to anyone who is building iOS apps to avoid confusion or mistakes. You can visit our Toolbar Design Guide on Figma to see more and use the components in your own designs. Thanks to Rita Tavares and Carmine Acierno as members of Air Apps for helping make this library.

Leave us a comment if you have any questions or suggestions!

Thanks for reading!

Yugi Aragão, UI / UX Designer @ Air Apps