Footer

Intro

A footer is a section that displays a description, label, or buttons. There are four types of footer variations.

Variations

Persistent Footer with Buttons

Indicate the Primary Action

When one or more actions are presented, indicate the primary action by placing it in a contained button. The secondary action should be shown as a text button

Primary action: contained button
Secondary action: text button

Persistent footer with buttons

Separate Opposing Actions

When using two buttons that give opposite options to users, the two buttons are placed on the left and right of the footer to emphasize the different opposite actions, for example “Agree” and “Disagree”.

Separate opposite actions placed on the left and right of the persistent footer

List Actions

When using two buttons that give no primary action, they are placed next to each other using a text button.

Persistent footer with text buttons

Attribute Footer

The attribute footer functions like a text button. It contains a text label and its attribute.

Footer with attribute

Title Footer

The title footer is a read-only component that displays simple text. It is embedded in a cell and aligned with a keyline.

Footer with title

Helper Text Footer

The helper text footer is for displaying a simple sentence that is read-only. It is not part of the cell but blends in with table background.

Footer with helper text left aligned (left) and centered (right)

Resources

Related Components: Buttons

Development: Persistent Footer

SAP Fiori for Web: Footer Toolbar