Floating Action Button
Table of ContentsEdit this section, Opens in new window
Use when action have to be visible all the time on the screen. Both for the most prominent action in a screen for mobile, but also for customer service tools and back to top. Use sparingly!
Make sure you have room to add a new floating action button.
|Default||This is the standard looking floating action button|
|Primary||Primary floating action button is used when you have several floating action buttons and you want to make it prominent.|
|Info||This floating action button is used when you want to have a different look and feel to a prominent action button.|
Use when action have to be visible all the time on the screen
NOTE! The floating action buttons take presedence in z-index for almost all other elements, so other elements need to adhere to this.
Floating action buttons only have one size,
Floating actions buttons should always be placed at the bottom right.
Default floating action button
The default floating action button is used for simple, non-invasive global actions, like back to top or customer service contact floater.
The floating action buttons should be default be positioned in the bottom right area. If you have more action buttons, they need to interact accordingly, stacking vertically, or in rare cases, horizontally.
You can put any relevant icon inside, as long as it is
24px x 24px as a
Back to top
The back to top button is used to let users easily enough scroll back to top when reading articles or very long pages. I should appear when the user has scrolled down approximately 4 pages, and disappear when user scrolls past that treshold.
On smaller devices, it's recommended that the back to top button is hidden, and that a tap on the global header takes users to the top.
The customer service floating action button is used to initiate the customer service contact floater.
Primary floating action button
The primary floating action button should more or less only be used on smaller devices, to highlight the primary action on the screen.
The plus floating action button is use when you want to add or create something in a screen