XDS — Design System

AvatarStatusDot@xds/core · XDSAvatarStatusDot v0.0.13

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.

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

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.

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>
  );
}