Badge

Quiet pills in six tones. `dot` adds a status dot.

Badge is part of Pro.

Get Pro to try it live and copy its code, along with every other element in the library.

StatusA dot and a word. Live and online dots breathe; the word crossfades out of a blur when the state changes.
ChipRemovable chips. A chip shrinks into a blur when removed and the rest close the gap on a spring.
Outcome statesFour quiet endings, each with its own treatment, behind a small picker. Stopped: the partial stays and the cursor thins to a hairline.
SkeletonShimmering placeholders that hand over to real content. The bars of the placeholder stretch 8% past their size and blur away 30ms apart while the content un-blurs underneath.
ProgressA bar and a ring whose fill moves on a spring while the percentage rolls like an odometer beside it. At 100% the fill turns green, the ring's number becomes a tick and a chime fires.
Step loaderA checklist that runs one step at a time. The live step spins a ring and shimmers its label; when it finishes the ring closes, a tick draws inside it and the next step lights.