display
Avatar
Round image display with automatic initials fallback when image is missing or fails to load.
Import
import { Avatar } from '@stella-ds/react'Props
| Prop | Type | Default | Description |
|---|---|---|---|
| alt | string | — | Required. Alt text and fallback initial source |
| src | string | undefined | Image URL |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Avatar diameter (24/32/40/48/64px) |
| fallback | ReactNode | first char of alt | Custom fallback content |
Preview
Examples
Basic
<Avatar src="/photo.jpg" alt="Jane Doe" size="lg" />