Status Indicator

Installation

npx @smicolon/fasla-ui@latest init
npx @smicolon/fasla-ui@latest add status-indicator

Preview

Variants

status sets the colour: success for online, warning for away, destructive for busy and muted for 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

Usage

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

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

export function PresenceDots() {
  return (
    <div className="flex items-center gap-4">
      <StatusIndicator status="online" />
      <StatusIndicator status="busy" size="4" />
    </div>
  )
}

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

const user = { name: "Layla" }

export function UserPresence() {
  return <StatusIndicator status="away" label={`${user.name} is away`} />
}