Actions
FloatingIconButton
A round action pinned to a screen corner.
When to reach for it
A page-level affordance that must stay reachable while the reader scrolls — back to top, a mobile table of contents.
Examples
default
Notes
A round action pinned to a screen corner.
A translucent paper ground with a backdrop blur rather than a drop shadow — the White Reset has no elevation ramp, so what separates the control from the page under it is the blur and the hairline, not a glow.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| labelrequired | string | Accessible name — the button has no visible text, so this is its only name. | |
| positionrequired | 'left' | 'right' | Which bottom corner the control is pinned to. |
Also accepts everything in Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'>. Those are forwarded to the underlying element and are not listed row by row.
Accessibility
- label is the only name the control has; it is required rather than optional.
- 44px square, which is the pointer-target floor (WCAG 2.5.8).