BottomBar

Introduction

The bottom bar is used for to navigate to the next or previous page in a form, or for confirming or canceling actions. It is designed to be placed at the bottom of the page or at the bottom of a container. The bar has a fixed position and will float above other content. For an example of the bottom bar in use, check out the Forms documentation.

Interactive demo

Try the interactive demo below to explore the BottomBar component.

Usage

• In long forms where primary actions (e.g Back, Next, Submit) should always be accessible.
• When you want a consistent, always-visible area for committing or canceling changes on the current screen.
• When you need fixed elements that stay in place while the user scrolls through content.

Considerations

• The bottom bar should not be used for single actions, such as a back button.
• Ensure there are at least two buttons in the bottom bar to provide clear navigation options.
• Avoid using it on simple pages, where single or multiple buttons would suffice.