A toolbar appears at the bottom of a screen and contains buttons for performing actions relevant to the current view. By default, a toolbar is translucent: It uses a background material only when content appears behind it, removing the material when the view scrolls to the bottom. A toolbar hides when a keyboard is onscreen.
For developer guidance, see UIToolbar.
TIP Although toolbars and tab bars both appear at the bottom of a screen, each has a different purpose. A toolbar contains buttons for performing actions related to the screen, such as creating an item, filtering items, or marking up content. A tab bar lets people navigate among different areas of an app, such as the Alarm, Stopwatch, and Timer tabs in the Clock app. Toolbars and tab bars don’t appear together in the same view.
Use a toolbar to elevate a small number of actions that people are most likely to perform in the current context. A toolbar provides a prominent and consistent location for frequently used commands. If you need to provide a way to switch contexts, consider using a tab bar instead.
In an iPadOS app, consider using a navigation bar instead of a toolbar for frequently used actions. Buttons at the top of the iPad screen are more prominent than those at the bottom, and they can be easier for people to reach. For guidance, see Navigation Bars.
In a toolbar that contains three or fewer buttons, consider using concise text titles for additional clarity. For example, Calendar uses the titles Today, Calendars, and Inbox. To ensure that the titles don’t run together, you can insert fixed spaces between the buttons. For developer guidance, see UIBarButtonSystemItemFixedSpace.
In a toolbar that has more than three buttons, consider using SF symbols to conserve space. SF Symbols provides a wide range of customizable symbols you can use to represent actions in your app. If you need to create a custom glyph for a toolbar button, use the following sizes, adjusting as needed for balance. For guidance, see Glyphs.
|Target size||Maximum size|
|24x24 pt (72x72 px @3x)||28x28 pt (84x84 px @3x)|
|24x24 pt (48x48 px @2x)||28x28 pt (56x56 px @2x)|
Avoid using a segmented control in a toolbar. Segmented controls let people switch contexts, whereas a toolbar’s actions are specific to the current screen.