Avatar·component·@astryxdesign/core

Avatar Status Dot

Size-aware status indicator dot that reads avatar size from context and scales proportionally. Each variant pairs a colour with a distinct built-in shape (filled, ring, minus) so status is never conveyed by colour alone (WCAG 1.4.1).

Open in Playground @astryxdesign/core/Avatar

Showcases and examples

2 documented examples

Avatar Status Dot

AvatarStatusDot renders a presence indicator on an Avatar, with variants for positive, neutral, and negative states. The dot size automatically coordinates with the Avatar size.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · avatar-status-dot-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {Avatar, AvatarStatusDot} from '@astryxdesign/core/Avatar';
import {HStack} from '@astryxdesign/core/Layout';

export default function AvatarStatusDotShowcase() {
  return (
    <HStack gap={4} vAlign="center">
      <Avatar
        name="Online User"
        size="xl"
        status={<AvatarStatusDot variant="success" label="Online" />}
      />
      <Avatar
        name="Away User"
        size="xl"
        status={<AvatarStatusDot variant="neutral" label="Away" />}
      />
      <Avatar
        name="Busy User"
        size="xl"
        status={<AvatarStatusDot variant="error" label="Busy" />}
      />
    </HStack>
  );
}

Usage

Typed props

Prop	Type and behavior
`variant`	`'success' \| 'neutral' \| 'error'` · default 'success' Semantic variant pairing colour with a distinct shape: success = filled green dot, neutral = grey ring, error = red dot with a minus bar.
`label`	`string` Accessible label describing the status. Inside an Avatar it is composed into the avatar's accessible name (e.g. "Jane Doe, Online"); the Avatar root is role="img", which prunes child semantics, so the composed name is how the status reaches assistive tech. Standalone dots expose role="img" with this label directly.
`icon`	`ReactNode` Icon centered inside the dot (hidden at tiny sizes). A rendered icon replaces the built-in shape glyph, so use a different icon per status. Slot: Icon