The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.

The control is used for closing or finalizing actions that impact the whole page. It is only visible when actions appear, when message handling is visible, or when the draft indicator is displayed. One main advantage of the footer bar is that this bar is always visible and will not scroll away.

Our general guideline is to use only icon buttons or text buttons. Icon and text should not be combined into one button. Buttons are always right-aligned.

Buttons are sorted from frequently-used to seldom-used. This ensures that the most important buttons will go into the overflow last.

Usage

Use the footer toolbar:

• If you have closing or finalizing actions on your page that apply to the whole page.

Do not use the footer toolbar:

• If you have different containers on your page (such as charts, tables, and forms) and the action influences only certain items. In this case, place the action as close to the corresponding item(s) as possible.
• If you have global actions (such as Edit or Delete) that are not finalizing or closing actions. In this case, use the header toolbar instead.

Responsiveness

To enable responsiveness, use the OverflowToolbar control. For more information, please refer to the corresponding section in the toolbar overview article.

The height of the toolbar changes on desktops (compact mode), tablets, and smartphones (cozy mode). For more information about cozy and compact modes, see content density.

Components

The footer toolbar can contain the following components:

• Message indicator
• Draft indicator
• Finalizing/closing actions

All closing or finalizing actions are placed on the right side of the toolbar.

The footer toolbar can also include a message and draft indicator. For more information, see draft handling and messaging.

Behavior and Interaction

Our general guideline is to use only icon buttons or text buttons. Icon and text should not be combined into one button. Buttons are always right-aligned.

The buttons are sorted from frequently-used to seldom-used. This ensures that the most important buttons will go into the overflow last.

Styles

• Use button styles only if they help the user, and not for decoration.
• Use them for the most common actions, such as Save.
• Use a positive/negative style (property: type = accept or reject) or an emphasized style (property: type = emphasized).
• Use only one emphasized button per toolbar and never mix emphasized and semantic buttons.
  Exception: Additional messaging button for the message popover

For more information, see Button.

Guidelines

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.