Status Indicator

A presence dot — online, away, busy or offline — with an accessible name, so colour never carries the status alone.

Installation

bash

npx @smicolon/cli init
npx @smicolon/cli add status-indicator

Preview

Variants

status sets the colour: success for online, warning for away, destructive for busy and muted for offline.

Online

Away

Busy

Offline

Sizes

8px with a 2px ring, or 4px with a 1px ring for the smallest avatar. The ring is the page background, drawn outside the dot, so it never changes its size.

Accessibility

Colour alone can’t carry the status. Each dot carries hidden text: "Online", "Away", "Busy" or "Offline", or "متصل", "بعيد", "مشغول" or "غير متصل" when the nearest lang is Arabic. It follows a language change without a reload.
Pass label for more context, such as "Layla is online".
When the status is already written next to the dot, hide the dot with aria-hidden so it isn’t announced twice.
The dot is a circle, so it has no direction. The parent decides where it sits; Avatar pins it to the end corner.

Props

Prop	Type	Default	Description
`status`	`"online" \| "away" \| "busy" \| "offline"`	`"online"`	Presence to show.
`size`	`"8" \| "4"`	`"8"`	Dot size in pixels.
`label`	`string`	—	Accessible name, in the page language by default.
`className`	`string`	—	Extra classes for the component.

Usage

The dot is meant to sit on an avatar, not on its own over a coloured surface.

tsx

import { StatusIndicator } from "@/components/ui/status-indicator"

<StatusIndicator status="online" />
<StatusIndicator status="busy" size="4" />

// More context for screen readers
<StatusIndicator status="away" label={`${user.name} is away`} />