Components · Teaching

Callout & tip

The same coachmark chrome, placed in the flow instead of anchored to a target — an icon chip, a title, a body and a top-right dismiss. Use it to surface a new feature (a NEW badge + a Got it) or drop a passive tip. Give a tip a storageKey and it grows a “Don't show again” checkbox that persists the dismissal to localStorage so it never returns. Teaching accent — not a status hue.

new feature · NEW badge · Got it + dismiss
New

Transport relays are here

Chain several drivers into one long-haul route and hand off legs between volunteers. Each leg auto-notifies the next driver 30 minutes out, so no dog waits at a meetup.

A new-feature callout leads with the NEW Badge and a primary Got it in the actions slot (pinned .is-hover). The top-right X mirrors the coachmark's dismiss; both routes fire onDismiss.

tip · storageKey → “Don't show again” persists to localStorage
Tip

Save an intake note as a template

Turn any note into a reusable template from the ••• menu, then drop it into a new dog's file in one tap — vaccination checklists, foster hand-off, adoption follow-up.

With a storageKey set, the footer grows a real “Don't show again” checkbox (shown checked). On dismiss it writes localStorage[storageKey]="dismissed" and the tip stays suppressed across reloads — it never opens again.

compact · single-line inline tips
TipPress ⌘K anywhere to jump to a dog, foster, or event.
District matching now runs the moment you save an address — no more nightly wait.

A one-line density variant — an icon, a phrase, and a dismiss. The accent flavour is a teaching tip; the neutral one is a passive note. The dismiss is pinned .is-hover on the first; tab to the second for the focus ring.

substrate
A card on surface with an accent tint wash (12% accent) and an accent hairline — a teaching hue, deliberately not one of the info / warn / bad status hues. --radius-lg, inner-glow.
icon chip
A 36px accent-soft tile holding a lucide glyph (spark for “new”, lightbulb for a tip). Decorative — aria-hidden; the title carries the meaning.
NEW badge
The Badge primitive in solid accent — an uppercase NEW pill that flags a first-run feature. Paired with the title, never the sole signal.
dismiss
The top-right X (aria-label="Dismiss") — faithful to TeachingPopover's absolute top/right control. Closing fires onDismiss.
don't show again
Set storageKey and a real checkbox appears; a checked dismiss writes localStorage[storageKey]="dismissed" and the callout is suppressed for good. dontShowAgainLabel overrides the text.
compact
A single-line tip-line for low-stakes hints — icon + phrase + dismiss on surface-2 (accent or neutral). No actions, no badge.

Source · TeachingPopover.tsx chrome placed inline (title / body / actions / top-right dismiss / storageKey “Don't show again” → localStorage) + Badge.tsx (the NEW pill) · teaching accent, not a status hue · design-system/teaching.