Status Indicator

A small coloured dot indicating presence or system state. Use alongside avatars, list items, or service monitors.

Preview

Online

Away

Busy

Offline

Sizes

Small (8 px)

Default (10 px)

Large (12 px)

Variants

Status	Colour	Use case
Online	Green	User is active, service is running
Away	Amber	User is idle, service degraded
Busy	Red	User is in a meeting, service down
Offline	Grey	User is disconnected, service stopped

Props

Prop	Type	Default	Description
status	'online' | 'away' | 'busy' | 'offline'	--	Status type
size	'sm' | 'md' | 'lg'	'md'	Dot diameter
label	string	--	Accessible label (required)

Code example

React

import { StatusIndicator } from '@thepace/lexicon/components';

<StatusIndicator status="online" label="Online" />
<StatusIndicator status="busy" size="sm" label="Do not disturb" />

Vanilla HTML

<span class="lex-status-dot lex-status-dot--online"
      role="status" aria-label="Online"></span>

CSS class reference

Class	Purpose
.lex-status-dot	Base dot styles
.lex-status-dot--online	Green dot
.lex-status-dot--away	Amber dot
.lex-status-dot--busy	Red dot
.lex-status-dot--offline	Grey dot
.lex-status-dot--sm	8 px
.lex-status-dot--lg	12 px
.lex-status-row	Dot + label row

Accessibility

• Add role="status" and aria-label describing the state.
• Colour is not the only indicator — always pair with a text label or tooltip.
• Use aria-live="polite" if the status updates dynamically.

Guidelines

Do

• Always pair the dot with a text label or tooltip for accessibility.
• Use alongside avatars to show user presence.

Don't

• Don't rely on colour alone — always provide a text alternative.
• Don't use custom colours — stick to the four semantic statuses.