FloatingControls

The stack of round buttons in the bottom right corner: back to top, plus at most two others, such as the theme switch. Each is an IconButton, the system’s 36px round button with one icon.

When to use

Once per page. Besides back to top, it holds what a small screen lost when the rails stacked, usually a table of contents. Three buttons at most; it is not a toolbar.

On a page

<FloatingControls>
  <ThemeToggle />
</FloatingControls>

<FloatingControls devices={["mobile", "tablet"]}>…</FloatingControls>

Anatomy

Round 36px buttons in a column, 24px from the bottom right corner, each with --shadow-float. Back to top is the last one.

Variants

Prop	Values
devices	The screens that show it: mobile (below 768px), tablet (768 to 1080px), desktop (above 1080px)
tone	canvas (default) or dark, for the back to top button
icon (IconButton)	adjustments, arrow-up, list, menu, moon, search, sun or x
href (IconButton)	Makes the button a link

States

State	What changes
Top of the page	Back to top is hidden
Scrolled more than a window’s height	Back to top fades in
Pressed	The button fills with the soft surface
Below 768px	Each button grows to 44px

Accessibility

Every IconButton has an accessible name from label, since it shows no text. Back to top scrolls smoothly unless the reader asked for reduced motion, and moves the keyboard focus to the top of the page, so the next Tab starts there.

API

FloatingControls.astro and IconButton.astro. Ported from the handoff; the component watches the scroll itself instead of taking showTop.

Related

ThemeToggle, ContentGrid, TocButton, the table of contents for a narrow screen.