Overview
Footer toolbars contain workflow-related actions that represent steps in a process. These can be meant for accomplishment (such as Save), or for finalizing a process (such as Post or Accept/ Decline). Actions in the footer toolbar are called "workflow actions" or "finalizing actions" (such as Cancel).
Footer Actions
When to Use
Recommended
- Use the footer to conclude actions
- Only show one primary action for the entire page across both header and footer toolbars
- If both header and footer toolbars are available, the footer shows the primary action, since it is usually more in focus.
Not Recommended
- Display actions that are not conclusive; actions that might require further steps to be finalized
- Having two emphasized Action Buttons. If there is already one on the page, deemphasize the one that is not in the footer, or provide a modal dialog or wizard for finalization
- Do not disable the Primary Action button to wait for the form required fields to be filled. Keep the buttons active and use validation instead.
- Do not disable negative path (Close / Cancel) buttons.
Footer Actions
Located in the footer are any finalizing / concluding actions, i.e., actions that require the user to have gone through the content of the page and take action. Footer actions affect the content on a page level.
Examples of these are:
- Positive path: Save, Create, Next, etc.
- Negative path: Cancel
Actions types in the Footer
Ensure right-alignment of actions
The most important action is emphasized (primary action). In the footer toolbar, this is usually a forward path action.
Actions are placed from left to right according to their path:
- Alternative path (optional). Alternative paths appear as transparent actions.
- Negative path. These actions navigate away from the current page without triggering any changes or saving edited progress (such as Cancel or Close).
Footer Types
The Footer is always placed on the bottom of the page, below the content it affects.
There are two main types of footer:
Standard
The footer is visually integrated into it's content (dialog or wizard) that provides the finalizing actions. The footer is therefore always visible (loading, independent from previous page interactions).
Floating
The footer overlays the current workflow on large screens and floorplans to provide the finalizing actions in a more evident form. The footer can appear on demand and is used when the page includes scrolling content (which will then scroll behind the content).
Fiori Guidelines - Action Placement