Skip to content

Floating Action Button13.10.5

> Don't you worry about a thing!™


$ npm i @if-design-system/floating-action-button@13.10.5

Edit this section

Overview

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.

Edit this section

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.
Edit this section

Usage

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.

Sizing

Floating action buttons only have one size, 64x64px.

Placement

Floating actions buttons should always be placed at the bottom right.

Stacked together

Floating actions buttons should stack with 20px between them

Edit this section

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

Style
  1. The fill color is BE 5, LIGHTEST BEIGE
  2. The outline color is BE 1, DARK BEIGE
  3. The shadow color is BR 1, BROWN 10%

Behaviours

Interactions

Hover
Back to top
  1. When using the back to top modifier, the icon is moved up on hover, to indicate direction
Customer service
  1. The default behaviour with icons is that the icon is enlarged 120%
Focus
Style
  1. The color used for the focus ring is the direct complementary color of BL 1, BLUE
Active
Style
  1. 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.

Back to top
  1. 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

Implementation
<button aria-label="Back to top" class="if floating-action-button back-to-top"></button>
// Detect request animation frame
const scroll =
  window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  // IE Fallback, you can even fallback to onscroll
  function(callback) {
    window.setTimeout(callback, 1000 / 60);
  };
let lastPosition = -1;
let isDeactivating = false;
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
const backToTopButton = document.querySelector('.if.back-to-top');

backToTopButton.addEventListener('click', () => {
  window.scroll({ top: 0, left: 0, behavior: 'smooth' });
});

backToTopButton.addEventListener('keypress', e => {
  if (e.key === 'Enter') {
    window.scroll({ top: 0, left: 0, behavior: 'smooth' });
  }
});
const loop = () => {
  // Avoid calculations if not needed
  if (lastPosition == window.pageYOffset) {
    scroll(loop);
    return false;
  } else if (window.pageYOffset >= vh && !isDeactivating) {
    lastPosition = window.pageYOffset;
    backToTopButton.classList.add('is-visible');
    scroll(loop);
    return false;
  } else if (isDeactivating) {
    lastPosition = window.pageYOffset;
    scroll(loop);
    return false;
  } else if (window.pageYOffset < vh && !isDeactivating) {
    lastPosition = window.pageYOffset;
    if (backToTopButton.classList.contains('is-visible')) {
      isDeactivating = true;
      backToTopButton.classList.remove('is-visible');
      backToTopButton.classList.add('is-deactivating');
      setTimeout(() => {
        backToTopButton.classList.remove('is-deactivating');

        isDeactivating = false;
      }, 2000);
    }
    scroll(loop);
    return false;
  } else {
    lastPosition = window.pageYOffset;
  }

  scroll(loop);
};

// Call the loop for the first time

loop();
Customer service

The customer service floating action button is used to initiate the customer service contact floater.

Customer service
  1. Opens up the customer service contact floater
Implementation
<button class="if floating-action-button customer-service"></button>
Edit this section

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

Style
  1. The fill and outline color is BL 1, BLUE
  2. The shadow color is BR 1, BROWN 10%

Behaviours

Interactions

Hover
Primary
Plus
  1. The default behaviour with icons is that the icon is enlarged 120%
Focus
Style
  1. The color used for the focus ring is the direct complementary color of BL 1, BLUE
Active
Style
  1. 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

Plus
  1. Should add or create something
Implementation
<button class="if floating-action-button primary plus"></button>

Implementation

<button class="if floating-action-button primary"></button>
Edit this section

Implementation

Here is the default floating action button implementation code for HTML. Features implementation code is listed next to each feature element.

<button class="if floating-action-button"></button>
Edit this section

Contact us