Avatar
Displays a user avatar. When src is set it renders the image; when name is set it derives initials; otherwise renders children as a custom placeholder.
With image
<Avatar src="https://example.com/user.jpg" alt="Jane Doe" />Initials from name
JD
JS
AL
BO
<Avatar name="Jane Doe" />
<Avatar name="John Smith" color="blue" />
<Avatar name="Alice" color="green" />Custom placeholder
<Avatar>
<UserIcon />
</Avatar>Variants
AB
AB
AB
AB
AB
AB
<Avatar name="AB" variant="filled" />
<Avatar name="AB" variant="light" />
<Avatar name="AB" variant="outline" />
<Avatar name="AB" variant="transparent" />
<Avatar name="AB" variant="default" />Size
JD
JD
JD
JD
JD
<Avatar name="JD" size="xs" />
<Avatar name="JD" size="sm" />
<Avatar name="JD" size="md" />
<Avatar name="JD" size="lg" />
<Avatar name="JD" size="xl" />Radius
JD
JD
JD
JD
JD
JD
<Avatar name="JD" radius="xs" />
<Avatar name="JD" radius="sm" />
<Avatar name="JD" radius="md" />
<Avatar name="JD" radius="lg" />
<Avatar name="JD" radius="xl" />
<Avatar name="JD" radius={0} /> {/* square */}Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | URL of the avatar image |
alt | string | — | Accessible image description; also used as aria-label |
name | string | — | Full name — initials are auto-derived when no src or children |
variant | 'filled'|'light'|'outline'|'transparent'|'default'|'white' | 'light' | Placeholder background variant |
color | UiColor | — | Theme color for the placeholder |
size | 'xs'|'sm'|'md'|'lg'|'xl'|number|string | — | Width and height (number → rem) |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|number|string | — | Border-radius |