XDS — Design System

XDSAvatarStatusDot@xds/core · Avatar

Preview coming soon

Usage

Avatar represents a person or team with a profile photo, initials, or a default icon. Use it in comment headers, contact lists, chat messages, user cards, and anywhere you need to identify someone visually.

Best practices

Guidance	Practices
Do	Always pass a name so the avatar can show initials if the photo fails to load, and so screen readers can announce who it represents.
Do	Pick a size that matches the context — tiny or xsmall for inline mentions, small or medium for lists and cards, large for profile headers.
Do	Add a status dot when knowing someone's availability matters, like in chat or team views.
Don't	Use Avatar for logos, product images, or anything that isn't a person or team — use an image or icon instead.
Don't	Force a square or custom shape — avatars are always circular to stay consistent across the system.

Anatomy

Element		Description
Photo		The profile image, loaded from the src URL. Shown when available.
Initials		One or two letters extracted from the name. Shown when no photo is available.
Default icon		A generic person silhouette. Shown when there is no photo or name.
Status dot		A small indicator in the bottom-right corner showing availability (online, away, busy).

Import

ts
import {XDSAvatarStatusDot} from '@xds/core/Avatar'

Props

Prop	Type	Description
variant	'positive' \| 'neutral' \| 'negative' (default: 'positive')	Semantic color variant of the dot.
label	string	Accessible label for screen readers.
icon	ReactNode	Icon centered inside the dot (hidden at tiny sizes).

Showcase source

tsx
'use client';
import {XDSAvatar, XDSAvatarStatusDot} from '@xds/core/Avatar';
import {XDSHStack} from '@xds/core/Layout';
export default function AvatarStatusDotShowcase() {
  return (
    <XDSHStack gap={4} vAlign="center">
      <XDSAvatar
        name="Online User"
        size="large"
        status={<XDSAvatarStatusDot variant="positive" label="Online" />}
      />
      <XDSAvatar
        name="Away User"
        size="large"
        status={<XDSAvatarStatusDot variant="neutral" label="Away" />}
      />
      <XDSAvatar
        name="Busy User"
        size="large"
        status={<XDSAvatarStatusDot variant="negative" label="Busy" />}
      />
    </XDSHStack>
  );
}