Avatar
Displays a user image, initials fallback or a placeholder.
Image
Pass a src to render a user photo. An alt description is recommended for accessibility.
<Avatar src="https://i.pravatar.cc/40" alt="User avatar" />Fallback initials
When no src is provided, or the image fails to load, the fallback string is shown (up to 2 characters).
JMAB
<Avatar fallback="JM" alt="Juan Martinez" />
<Avatar fallback="AB" alt="Alice Brown" />Placeholder
With no src and no fallback, a generic person icon is shown.
<Avatar />Sizes
Use the size prop to control the avatar dimensions.
XSSMMDLGXL
<Avatar fallback="XS" size="xs" />
<Avatar fallback="SM" size="sm" />
<Avatar fallback="MD" size="md" />
<Avatar fallback="LG" size="lg" />
<Avatar fallback="XL" size="xl" />Shape
Use shape="square" for a rounded-rectangle avatar instead of the default circle.
CISQ
<Avatar fallback="CI" shape="circle" />
<Avatar fallback="SQ" shape="square" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL to display |
alt | string | — | Alt text for the image, also used as aria-label for fallback |
fallback | string | — | Up to 2 characters shown when no image is available |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Controls the avatar dimensions |
shape | 'circle' | 'square' | 'circle' | Controls the border radius |
className | string | — | Additional Tailwind classes |