Floating Action Button
Bundle
Table of Contents
Edit this section, Opens in new windowOverview
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.
Variations
| Type | Purpose |
|---|---|
| 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. |
Usage
Use when action have to be visible all the time on the screen
Sizing
Floating action buttons only have one size, 64x64px.
Placement
Floating actions buttons should always be placed at the bottom right.
Floating actions buttons should stack with 20px between them
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.
Usage
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 background-image.
Anatomy
- The fill color is BE 5, LIGHTEST BEIGE
- The outline color is BE 1, DARK BEIGE
- The shadow color is BR 1, BROWN 10%
Behaviours
Interactions
Hover
- When using the back to top modifier, the icon is moved up on hover, to indicate direction
- The default behaviour with icons is that the icon is enlarged 120%
Focus
- The color used for the focus ring is the direct complementary color of BL 1, BLUE
Active
- When pressed, the button is scaled down to 90%
Modifiers
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.
- Takes the user back to top
Note the text, it is recommended to have a textual representation of the back to top button.
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.
Do not display the back to top button on smaller devices
Hide or remove the back to top button on smaller devices
Animation
When user has not scrolled yet
When user has scrolled to the point for displaying the back to top button
When user has scrolled past the point for displaying the back to top button
When user scrolls up again
Customer service
The customer service floating action button is used to initiate the customer service contact floater.
- Opens up 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.
Anatomy
- The fill and outline color is BL 1, BLUE
- The shadow color is BR 1, BROWN 10%
Behaviours
Interactions
Hover
- The default behaviour with icons is that the icon is enlarged 120%
Focus
- The color used for the focus ring is the direct complementary color of BL 1, BLUE
Active
- When pressed, the button is scaled down to 90%
Modifiers
Plus
The plus floating action button is use when you want to add or create something in a screen
- Should add or create something