Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA presence or status dot that is never only a colour: a focusable image named with the status in words, plus a tooltip with optional detail.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this next to names in lists, chat and assignee pickers to show presence or state in a small space.
Do not use a dot for critical states people must notice (use a visible badge with text), and do not rely on the tooltip for them.
It builds on tooltip, which the CLI installs for you.
import { TooltipStatusDot } from "@/components/tooltip-status-dot"<TooltipStatusDot name="Sam" status="away" detail="Back at 14:00" />| Prop | Type | Default | Description |
|---|---|---|---|
name | string | - | Whose status it is. |
status | online | away | busy | offline | - | The status. |
detail | string | - | Extra text for the name and the tooltip. |
role="img" and a text name ("Sam: Away. Back at 14:00"), so the status is read, not inferred from colour.| Key | Action |
|---|---|
| Tab | focuses the dot and shows the tooltip |
The pattern ships a Testing Library test (tooltip-status-dot.test.tsx) that covers the text name, unique labels for each status and focus with the tooltip.