Sticky footer
Updated 2026-05-14
Confidence anatomy medium variants high motion high a11y high content high
Overview
Section titled “Overview”A persistent container at the bottom of the viewport used for high-priority global actions (e.g., Save, Cancel, Next) that must remain visible while scrolling.
Anatomy
- 1 Containerthe interactive surface — receives focus, hover, press states
- 2 Labelaction verb in title case; the primary affordance signal
- 3 Leading icon (optional)reinforces the label; decorative when paired with text
- 4 Trailing icon (optional)chevron or external-link glyph for navigation hints
- 5 Loading indicator (optional)replaces label when action is in-flight
Variants
| Property 1 |
|---|
Default |
Motion
State Transitions
hover/focus/active transitions stay within the 100-200ms band