A dot's worth of status: live, idle, attention.
| Prop | Type | Notes |
|---|---|---|
| status | online · idle · busy · offline | Semantic colour of the dot |
| label | string | Optional text beside the dot |
| pulse | boolean | Animated ring for a live state |
| ring | boolean | 2px page-colour ring for overlaying media |
| aria-label | string | Required when the dot stands alone |
An Indicator is a glanceable dot of status — it never carries a number or a word inside it. For counts use a Badge; for a labelled status chip use a Badge with a dot.
Pair the dot with a word when the colour alone could be missed.
Don't put a number in the dot. A counted dot is a Badge.
Give the dot a page-colour ring when it overlaps an avatar.
Don't stack several dots for one thing. One state at a time.
Online presence on an avatar in chat and member lists.
A pulsing dot marks a stream or a real-time feed.
Service health rows on a status page.
| Token | Value | Role |
|---|---|---|
| --ind-size | 9px | Dot diameter (12px on media) |
| --ind-online | #1FA35C | Available / operational |
| --ind-idle | #E8A93A | Away / degraded |
| --ind-busy | #EB4A4F | Do-not-disturb / down |
| --ind-offline | #565A62 | Offline / ended |
| --ind-ring | 2px page bg | Separates the dot from media |
<span class="o-ind-row"> <span class="o-ind o-ind--online"></span> Online </span> <span class="o-ind o-ind--live"></span> <!-- pulsing --> <span class="o-ind-anchor"> <Avatar /> <span class="o-ind o-ind--online o-ind--ring"></span> </span>