v0.5.14

Avatar

User profile image with automatic fallback handling

Installation

pnpm add @wandercom/design-system-web

Usage

The Avatar component displays a user profile image with automatic fallback handling. When an image is unavailable or fails to load, fallback text is auto-generated from the fullName prop (using the first letter). If no fullName is provided, it defaults to "W".

11 lines
import { Avatar } from '@wandercom/design-system-web/ui/avatar';

export function Example() {
  return (
    <Avatar
      src="https://avatars.githubusercontent.com/u/6477234?v=4"
      alt="User profile"
      fullName="John Doe"
    />
  );
}

Preview

Loading example...
6 lines
<Avatar
  size="sm"
  src="https://avatars.githubusercontent.com/u/6477234?v=4"
  alt="User"
  fullName="User"
/>

Props

src

string
Image source URL.

alt

string
Alternative text for the image.

fullName

string
Full name of the user. Used for accessibility and to auto-generate fallback initials when image is unavailable. Defaults to 'W' if not provided.

size

'sm' | 'md' | 'lg'
Size variant. Defaults to 'md'.

slots

{ root?: string, image?: string, fallback?: string }
Custom CSS classes for component slots.
Avatar