Use a Bottom Action Bar to anchor 1 or 2 key actions to the bottom of the screen
Ideal for multi-step journeys, letting users move forwards or backwards between screens with ease.
Available in three visual themes to suit different contexts.
1. Surface background
2. Bright background
1. No background
Usage
Use a bottom action bar to keep vital CTAs on the screen at all times. Other page content scrolls beneath the fixed position bar.
Use a bottom action bar to allow users to move forwards and backwards through a multistep journey.
Use the theme that matches the screen background. Surface background themed bottom action bar on a surface background etc.
When using a bottom action bar with one button, use a solid button by default but you can use an outline button if less emphasis is required.
Writing bottom action bar buttons
- When navigating through a multi step journey, use the button label ‘Next’ to allow the user to move forwards through the journey and ‘Previous’ to move backwards.
-
Remember, buttons should be an ideal of 2 words, absolute maximum 4 words.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v35+ |
|
Web (@ovotech/element) |
❌ |
|
App (@ovotech/element-native) |
v5+ |
Related components