Photo
Avatar
Interactive documentation for the avatar component. Change props in the playground, inspect sizes, types, fallback initials, and chip state.
Preview
Code
<Avatar
size="3xl"
type="photo"
src="/Photo.png"
alt="User photo"
chip
initials="AB"
/>Sizes
All available avatar sizes in photo, icon, and initials modes.
| Size | Photo | Icon | Initials | With chip |
|---|---|---|---|---|
| xs | | AB | | |
| s | | AB | | |
| m | | AB | | |
| l | | AB | | |
| xl | | AB | | |
| 2xl | | AB | | |
| 3xl | | AB | | |
| 4xl | | AB | | |
| 5xl | | AB | | |
| 6xl | | AB | |
Types
Photo type renders image when src exists. Icon type renders fallback content.
Icon
Initials
AB
CD
EF
States
Dedicated examples for chip, empty src, initials fallback, and image alt.
With chip
AB
Without chip
AB
Photo without src
AB
CD
Initials normalize
A
AB
AB
Props
This table matches the current AvatarProps interface.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| size | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'xs' | Optional | Controls avatar size, icon size, initials text size, and chip size. |
| type | 'photo' | 'icon' | 'icon' | Optional | Controls avatar rendering mode. Photo mode renders image when src is provided. |
| src | string | undefined | Optional | Image source used for photo avatar. |
| alt | string | '' | Optional | Alt text for the avatar image. |
| chip | boolean | false | Optional | Wraps avatar with Chip component using size mapped from avatar size. |
| initials | string | '' | Optional | Fallback initials. Shows up to two uppercase characters when src is not provided. |