Status Indicator

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

التثبيت

bash

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

معاينة

الصيغ

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

متصل

بعيد

مشغول

غير متصل

المقاسات

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.

الوصولية

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.

الخصائص

Prop	Type	Default
status	"online" \| "away" \| "busy" \| "offline"	"online"
size	"8" \| "4"	"8"
label	string	the status in the page's language

الاستخدام

صُمّمت النقطة لتوضع على صورة رمزية، لا منفردةً فوق سطح ملوّن.

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`} />