Status Indicator
FreeA coloured dot paired with a text label to communicate the current state of a user, service, or entity. Four semantic states: Online (green), Offline (grey), Away (amber), and Busy (red). Always requires a text label — colour alone is never sufficient.
10 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Online | Green dot with "Online" label indicating active availability. | Use when a user or service is currently active and available. |
| Offline | Grey dot with "Offline" label indicating unavailability. | Use when a user or service is disconnected or inactive. |
| Away | Amber dot with "Away" label indicating temporary absence. | Use when a user is idle or temporarily unavailable. |
| Busy | Red dot with "Busy" label indicating the user should not be disturbed. | Use when a user is in a meeting, focused, or otherwise occupied. |
| Custom |
Usage Guidelines
Always include a text label alongside the coloured dot.
Use colour alone without a text label — this fails colour-blind users.
Use semantic colours consistently — green for online, grey for offline, amber for away, red for busy.
Invent custom status colours outside the four standard variants.
Place status indicators near the entity they describe (next to a name or avatar).
Show status indicators without explaining what they mean in your product context.
Update status in real-time when possible.
Use status indicators for non-presence data — use Badge instead.
Code
<span class="lex-status-indicator lex-status-indicator--online">
<span class="lex-status-indicator__dot" aria-hidden="true"></span>
<span class="lex-status-indicator__label">Online</span>
</span>
<span class="lex-status-indicator lex-status-indicator--away">
<span class="lex-status-indicator__dot" aria-hidden="true"></span>
<span class="lex-status-indicator__label">Away</span>
</span>
<span class="lex-status-indicator lex-status-indicator--busy">
<span class="lex-status-indicator__dot" aria-hidden="true"></span>
<span class="lex-status-indicator__label">Busy</span>
</span>
<span class="lex-status-indicator lex-status-indicator--offline">
<span class="lex-status-indicator__dot" aria-hidden="true"></span>
<span class="lex-status-indicator__label">Offline</span>
</span>.lex-status-indicator {
display: inline-flex;
align-items: center;
gap: var(--lex-status-gap, 6px);
}
.lex-status-indicator__dot {
width: var(--lex-status-dot-size, 8px);
height: var(--lex-status-dot-size, 8px);
border-radius: 50%;
flex-shrink: 0;
}
.lex-status-indicator--online .lex-status-indicator__dot {
background: var(--lex-status-online-color, var(--lex-color-success));
}
.lex-status-indicator--offline .lex-status-indicator__dot {
background: var(--lex-status-offline-color, var(--lex-text-muted));
}
.lex-status-indicator--away .lex-status-indicator__dot {
background: var(--lex-status-away-color, var(--lex-color-warning));
}
.lex-status-indicator--busy .lex-status-indicator__dot {
background: var(--lex-status-busy-color, var(--lex-color-error));
}
.lex-status-indicator__label {
font-size: var(--lex-status-font-size, 13px);
color: var(--lex-status-label-color, var(--lex-text-secondary));
}// Using Lexicon CSS classes with React
export function UserPresence({ status }: { status: 'online' | 'offline' | 'away' | 'busy' }) {
return <StatusIndicator status={status} />;
}Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-status-dot-size | — | — | size |
| --lex-status-online-color | — | — | color |
| --lex-status-offline-color | — | — | color |
| --lex-status-away-color | — | — | color |
| --lex-status-busy-color | — | — | color |
Accessibility
- The coloured dot must be supplemented with a text label — never rely on colour alone.
- Use aria-hidden="true" on the dot since the label provides the information.
- If used without a visible label (e.g., on an avatar), provide the status via aria-label on the parent.
- Ensure dot colours meet 3:1 contrast against the background (WCAG 1.4.11 non-text contrast).