Indicator
A small status dot for presence, liveness, and unread signals.
Basic
An indicator is just the dot. Where a badge labels something with a count or word, an indicator only signals. A bare .indicator sits on the muted foreground tone. Drop it inline next to a label.
Intents
Add an intent modifier to recolor the dot. Each reads the matching color token, so a runtime override retints every indicator of that intent at once.
Pulse
Add .indicator--pulse for an expanding halo in the dot's color, for live or active signals. Under reduced-motion the halo is dropped and the dot stays.
Sizes
Default sits between .indicator--sm and .indicator--lg. For an off-scale dot, set --indicator-size directly.
Pinned to a host
Overlay the dot on a corner with absolute positioning on a relative host — the notification-dot pattern for icon buttons and nav items. Raise --indicator-ring-width so the dot reads cleanly over a busy surface. (Dedicated .pin-* utilities land with the utilities pass; until then, Tailwind positioning works.) On avatars, reach for the built-in .avatar__indicator instead.
Corners
Pin a dot to any corner of a host. Logical insets (-top-1 -left-1 etc.) keep the markup simple; flip to physical edges as needed.
Customization
These variables retune .indicator. Override on the indicator, a parent scope, or :root.
| Variable | Use |
|---|---|
--indicator-size | Dot diameter; size modifiers set this |
--indicator-color | Dot fill and pulse halo color; intents reassign it |
--indicator-ring-width | Separator halo width; raise above zero to lift the dot off a busy surface |
--indicator-ring-color | Halo color; match the surface the dot overhangs |
--indicator-pulse-duration | Length of one pulse loop on .indicator--pulse |