Floating Button

Floating Button is a fixed-position button that sits above page content (default: bottom-right) to provide access to a high-priority action regardless of scroll position.

It supports two variants:

• Scroll-triggered (default): appears only after the user scrolls beyond a threshold.
• Persistent: always visible while the view is active (use sparingly).

Use when

• You need a single action accessible from anywhere on a long page.
• You need a Back to top control on pages that exceed ~2 viewport heights (≈2 screens).

Don’t use when

• The action is secondary/optional (adds noise and decision fatigue).
• It would cover critical UI (footer controls, pagination, sticky toolbars, chat/cookie UI).
• You’re tempted to add multiple floating buttons on one screen.
• You plan to add repetitive “Back to top” links in every section (use one floating control instead).

Content (Label required)

• Visible label is required (icon-only floating buttons are not allowed).
• Recommended label for the scroll utility: “Back to top”.
• Icons are optional and must be treated as decorative reinforcement (label carries meaning).

<a href="#skip" class="btn btn-floating scroll-reveal">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
    <path d="M342.6 73.4C330.1 60.9 309.8 60.9 297.3 73.4L137.3 233.4C124.8 245.9 124.8 266.2 137.3 278.7C149.8 291.2 170.1 291.2 182.6 278.7L288 173.3L288 544C288 561.7 302.3 576 320 576C337.7 576 352 561.7 352 544L352 173.3L457.4 278.7C469.9 291.2 490.2 291.2 502.7 278.7C515.2 266.2 515.2 245.9 502.7 233.4L342.7 73.4z"/>
  </svg>
  Provide feedback
</a>

<button class="btn btn-floating">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
    <path d="M539.3 75.3C532.1 68.1 522.2 64 512 64C501.8 64 491.9 68.1 484.7 75.3L466 94L546 174L564.7 155.3C571.9 148.1 576 138.2 576 128C576 117.8 571.9 107.9 564.7 100.7L539.3 75.3zM306.3 151.6C309.4 148.5 314.5 148.5 317.6 151.6L347 181L136.8 391.2C131 397 126.8 404.1 124.6 412L96.8 509.3L71 535C61.6 544.4 61.6 559.6 71 568.9C80.4 578.2 95.6 578.3 104.9 568.9L130.6 543.2L227.9 515.4C235.7 513.2 242.9 509 248.7 503.2L500.7 251.3C507.9 244.1 512 234.2 512 224C512 213.8 507.9 203.9 500.7 196.7L443.3 139.3C436.1 132.1 426.2 128 416 128C405.8 128 395.9 132.1 388.7 139.3L381 147L351.6 117.7C329.7 95.8 294.3 95.8 272.4 117.7L167 223C157.6 232.4 157.6 247.6 167 256.9C176.4 266.2 191.6 266.3 200.9 256.9L306.3 151.6zM153.1 486.9L170.4 426.4L213.6 469.6L153.1 486.9z"></path>
  </svg>
  Provide feedback
</button>

/* The amount of space the button is from the viewport edge */
--btn-floating-inset: #{$spacer-lg}; // 1.5rem

/* This is a switch to say whether the button is visible or not, driving the translate calculation */
--btn-floating-visible: 0;

• Add the floating button under the main content of the page—typically right before the closing tag for </main>—before the footer.
• When the button is a link, make it a link using <a href="example.com">an anchor tag</a>.
• When implementing the "Back to top" button, there are a number of elements which can be linked. Probably the most common one is the #skip link, which will take the user visually back to the top of the page, and will automatically set focus on the skip link. This lets the keyboard user either skip the navigation, or tab through it. The #skipto link would set focus at the top of the content on the page, below the navigation. DO NOT use #, as this will visually move the page to the top, but not move focus off the button, leaving the keyboard user at the bottom of the page.