Intro

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.

Footer toolbar - Size XL

Components

The footer toolbar can contain the following components:

• Message indicator
• Draft indicator
• Finalizing/closing actions

Examples of possible components

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 go into the overflow last.

App-Specific Actions

If needed, you can define your own action for the app. Use text-only buttons with a short, unambiguous text for the action the button performs. A button text is usually a single-word verb (for example, Save). Note that text strings can be longer in other languages.

Text vs. Icon Buttons

Use text-only buttons for all finalizing/closing actions (such as Save).

Styles

• Use button styles only if they help the user, and not for decoration.
• Use the emphasized button for primary actions, such as Save.
• Use the ghost button style for secondary actions, such as Return, and the transparent button for negative path actions, such as Cancel.
• Use the semantic button for positive/negative actions (property: type = accept or reject).
• 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 and Action Placement.

Guidelines

See the guidelines for the toolbar overview.

Resources

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