Avatar

User profile images with fallbacks

DisplayStable

Preview

Interactive preview of the Avatar component with different variants.

JD
John Doejohn@example.com
SMMDLG

Installation

Install the package via npm:

bash
npm install apex-design-system

Import

tsx
import { Avatar, AvatarImage, AvatarFallback } from 'apex-design-system';

Basic Usage

tsx
<Avatar>
  <AvatarImage src="/avatar.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in StorybookView source