Avatar

atoms

Circular user avatar with gradient background and initials. Sizes: sm (28px), md (40px), lg (56px).

ARIA Role: img

Demo

JD
AB
+

Props

PropTypeRequiredDefaultDescription
initialsstringYes—1-2 char string, e.g. 'ON', 'MR'
size'sm' | 'md' | 'lg'No'md'

TypeScript Interface

interface AvatarProps {
  initials: string;
  size?: 'sm' | 'md' | 'lg';
  alt?: string;
  status?: 'online' | 'offline' | 'away';
  onClick?: () => void;
}

Assertions (NASA Rule 5)

  • [type]initials must be 1-2 characters(NASA Rule 5)
  • [aria]Avatar wrapping a button must have aria-label or alt text(WCAG 1.1.1)

Usage

Import

import { Avatar } from '@epasslive/design-system'

Basic

<Avatar />

With Variants

<Avatar variant="primary" size="md" />