Sticky button bar
This is a white bar that contains buttons and sticks to the bottom when scrolling.
Component meta
Component identifier
- component-stickybuttonbar
Design version
- 2019-01-29
Design principles
- Trigger insight
Guidelines
Short description
The sticky bottom bar can be used in both a desktop and a mobile context to give the user the fastest call-to-action.
In the sticky bottom bar container, components such as label, value and button can be used.
When and how to use it
Use the sticky bottom bar when a call-to-action must be visible at all times.
Behaviour
The sticky bottom bar is presented at the bottom. There is a black shadow that gives the impression of the bar floating on top of the content.
Particularily useful when designing web pages that will be integrated inside an app.
The (primary) button component is placed to the right.
Do's and don'ts
- The sum bar is white. Do not use other colours.
Examples
Specification
Measurements
- Height: 76 px
- Width: 100%
Shadow
- Shadow (top): X: 0px, Y: 2px, Blur: 5px, Spread: 0
- Shadow: #000000 Alpha: 0,25
Colours
- See primary and secondary Buttons