Back to Top
ProA floating action button that appears after the user scrolls past a defined threshold, providing a one-click shortcut to return to the top of the page. Animates in from the bottom-right corner and smoothly scrolls the viewport to the top when activated. Useful on long pages where scrolling back manually is tedious.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Circular floating button with an upward arrow icon. | Use on long-scrolling pages like documentation, blogs, and dashboards with many sections. |
| With Label | Pill-shaped button showing "Back to top" text beside the icon. | Use when the icon alone may not be clear enough for the target audience. |
Usage Guidelines
Show the button only after scrolling past a meaningful threshold (e.g., 400px or one viewport height).
Show the button when the user is already at the top of the page.
Use smooth scrolling with prefers-reduced-motion fallback to instant scroll.
Overlap the button with bottom navigation, cookie banners, or chat widgets.
Provide aria-label="Back to top" for the icon-only variant.
Use on short pages where the entire content is visible without scrolling.
Position in the bottom-right corner, clear of other floating elements.
Animate the button appearance without respecting prefers-reduced-motion.
Code
Design Tokens
Accessibility
- Use aria-label="Back to top" for the icon-only variant since there is no visible text.
- Respect prefers-reduced-motion: skip the fade/slide animation and use instant scroll behaviour.
- The button should not be focusable when hidden — use the hidden attribute or inert.
- Smooth scroll uses scroll-behavior: smooth with a prefers-reduced-motion: reduce override.
- Do not auto-steal focus after scrolling — the user initiated the scroll and focus should remain on the button.