Coach mark
Spec
A short explanation that points at a real control. Figma 32:3109. Used by the tour, one-time tips and What's new.
Look
- surface-accent-subtle, radius md, padding lg, shadow-float, popup layer. Up to 416px wide.
- Optional eyebrow (1.1.0), title in heading, text in body; optional step count; a Secondary then a Primary button.
- Pointer: a 24px square turned 45°, aimed at the target's center; 12 positions (below, above, right, left; start, center, end).
Behavior
- Phones: the same content as a bottom sheet over the tab bar, the target scrolled into view.
- The target gets the focus outline while the coach mark shows.
- A non-modal dialog: focus moves to it, the page stays usable, Escape closes it. Nothing slides or fades.
Built 1.1.0
The app's own component, version 1.1.0, live. Fake data; nothing is saved.
Changes
- 1.1.0, Oct 9 2026: Optional eyebrow line ("What's new"). (#67)
- 1.0.0, Oct 2 2026: Figma 32:3109: 12 pointer positions, bottom sheet on phones.