03. Bottom bar

Utilize bottom bar for actions buttons with higher priority.
A maximum of five action buttons in the bottom bar can be provided, using a combination of icons and text.
These buttons can be shown or hidden when the user scrolls up and down, depending on the amount of information displayed in the body text area.
Don’t provide a more options button in the bottom bar. Do not allow the buttons to scroll horizontally. Don’t place the bar above the keyboard, except for components that are relevant to keyboard input (e.g., Cancel, Done, Save, or Next).

Example of device application

Phone

Tablet

Definitions and Function Differences

The bottom toolbar, which is designed for action buttons, and the bottom tabs, which are used for navigation, are defined and function differently.

Action buttons in the app bar on the action screen & action buttons in detail view

Place higher priority action buttons at the bottom.

List/Grid view – For screens where browsing is the main purpose

Place action buttons at the top.