Micro interactions
Usage
A button that plays idle → loading → success for a real async action — the reference template's "Button Loading States" and "Skeleton to Content Toggle" patterns, built as one reusable component rather than a one-off demo. Easing is the proven vocabulary from the kintsugi skill's reference/MECHANISMS.md (decisive entrance while working, playful overshoot on confirm) — not the default linear/ease most generated micro-interactions reach for, now shared via `@tokens/motion.ts` (`EASE_STANDARD`/`EASE_EMPHASIZED`) with the theme/brand-switch transition smoothing in globals.css and theme-scope.tsx, so a themed repaint and this button use one motion vocabulary. The checkmark is a real SVG path draw-in (`pathLength` + `stroke-dashoffset`), not a swapped icon.import { AnimatedButton } from '@summonware/ui';Best practices
DoUse it for an action that genuinely takes time — a save, a download, an export. A button with nothing to wait for does not need this.
DoLet `onRun` reject on failure. The button reverts straight to idle rather than getting stuck showing a false success.
Don'tChain another click handler onto the same button. `onRun` is the action — trigger side effects from inside it, not around it.
Anatomy
Idle *The default label/children.
LoadingA spinner and "Working…", shown while `onRun` is pending.
SuccessAn SVG checkmark that draws in, plus `successLabel`, held for `successHoldMs` before reverting.
Examples
Common configurations, variations and states.Download button
Click to run a fake 1.2s download, then confirm. The catalog's literal "download button" pattern.
Save action, outline variant
The same interaction on a lower-emphasis variant — a settings-form "Save" button, not a primary CTA.
Failed action reverts to idle
onRun rejecting — the button snaps back to idle instead of lying about success. Click to see it happen.
Reference variants
1 of 14 labels from the reference are demonstrated above.Button Loading StatesAnimated CountersAnimated Progress BarsHover EffectsScale UpShadow LiftBorder ColorBackground ShiftFade-in on ScrollAnalyticsSecurityPerformanceCollaborationSkeleton to Content Toggle