PresenceDot

PresenceDot

<span style={{ position: 'relative', display: 'inline-block' }}>
  <Avatar fallback="AL" />
  <PresenceDot status="online" attached />
</span>

Install: @helixui/core

import { PresenceDot } from '@helixui/core'

status: stable · since: 0.3.0

Tags: status, online, dot, presence

Anatomy

●  ← solid color dot

Layout

• display — inline-block
• width — content
• height — content
• intrinsicSize — ~8-10px circle
• stackable — true
• fullBleed — false

Visual

A small solid circle in a status color: success (online), warning (away), danger (busy), neutral (offline). Often anchored to the bottom-right of an Avatar.

Props

Name	Type	Default	Description
status	'online' | 'away' | 'busy' | 'offline'	online	Status; drives the color.
size	'sm' | 'md' | 'lg'	md	Dot size.
attached	boolean	false	When true, position absolutely in the bottom-right of the parent (parent must be position: relative).
label	string	—	Override the default aria-label (‘Online’, ‘Away’, etc.).

Tokens used

color.bg.surface.default, color.bg.action.success.default, color.bg.action.warning.default, color.bg.action.danger.default, color.text.muted

Accessibility

Role: status

Notes

• The dot has role="status" and an aria-label for screen readers.
• The white border isolates the dot from the avatar; uses color.bg.surface.default, so it adapts to dark mode.

Composes with

Component	Relation	Note
Avatar	sibling	Anchored to an Avatar.
AvatarGroup	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

show online status

“green presence dot on an avatar”

<Box position="relative">
  <Avatar fallback="ST" />
  <PresenceDot status="online" />
</Box>

Related

• Avatar
• AvatarGroup