FancyUI
Saved GitHub Get started
Button — status morph — preview

Button — status morph

FancyUI FANCYUI

One icon path morphs from loading to success or error, in place.

#minimal#press

Open docs

Use in FancyUI

Type
Interaction
Interaction
Press
Style
Minimal
Code availability
Open source

Why it works

A single SVG path carries loading, success and error, so the eye never has to find a new icon — the spinner becomes the check. A timer brings it back to idle.

When to use it

Save, submit and copy buttons whose result arrives in under a few seconds.

Things to watch

The status is announced through a polite `role="status"`. Guard against a second press while a request is in flight. The morph lives under `no-preference`.

Implementation clues

  • single path morph
  • stroke-dasharray
  • reset timer
  • tone current / semantic