Neo-Brutal Status Dot
An ink-outlined dot (volt for success, cobalt for accent and info, tomato for danger) with optional text; pulse widens a volt ring for live states (a data-loop, off under reduced motion and when paused).
Soft BentoMotion
Status Dot
A coloured dot with optional text; pulse adds a ping ring for live states (a data-loop, off under reduced motion and when paused).
Live, interactive React component · light themeResponsive
About the Soft Bento Status Dot
A coloured dot with optional text; pulse adds a ping ring for live states (a data-loop, off under reduced motion and when paused). One pinging dot per view; the Footer status already pings.
It is part of Soft Bento. The style’s 92 pieces share one set of tokens, type and motion, in a light and a dark theme, so whatever you take from it fits together.
To put it in your project, copy the prompt into Claude Code, OpenAI Codex or Cursor, or add the file and its styles by hand. The documentation walks through both.
See it on a full page
Noir Aurora Status Dot
A small dot with optional text: accent and success glow aurora green, info is ice, warning sun, danger ember, neutral a grey offline dot. pulse adds a ping ring for live states (a data-loop, off under reduced motion and when paused).
Swiss Tech Mono Status Dot
A dot with mono caps text; pulse adds a ping ring for live states (a data-loop, off under reduced motion and when paused).