An image element with a fallback for representing the user.
CT
JD
PD
<div style="display: flex; gap: 20px;">
<Avatar.root
id="avatar-1"
class="DemoAvatarRoot"
>
<Avatar.image
class="DemoAvatarImage"
src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
alt="Colm Tuite"
/>
<Avatar.fallback
class="DemoAvatarFallback"
delay_ms={600}
>
CT
</Avatar.fallback>
</Avatar.root>
<Avatar.root
id="avatar-2"
class="DemoAvatarRoot"
>
<Avatar.image
class="DemoAvatarImage"
src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
alt="Pedro Duarte"
/>
<Avatar.fallback
class="DemoAvatarFallback"
delay_ms={600}
>
JD
</Avatar.fallback>
</Avatar.root>
<Avatar.root
id="avatar-3"
class="DemoAvatarRoot"
>
<Avatar.fallback class="DemoAvatarFallback">PD</Avatar.fallback>
</Avatar.root>
</div>.DemoAvatarRoot {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
overflow: hidden;
user-select: none;
width: 45px;
height: 45px;
border-radius: 100%;
background-color: var(--black-a3);
}
.DemoAvatarImage {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.DemoAvatarFallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
color: var(--violet-11);
font-size: 15px;
line-height: 1;
font-weight: 500;
}
•
Automatic and manual control over when the image renders.
•
Fallback part accepts any children.
•
Optionally delay fallback rendering to avoid content flashing.
Anatomy
Import all parts and piece them together.
<Avatar.root id="…">
<Avatar.image src="…" alt="…" />
<Avatar.fallback>…</Avatar.fallback>
</Avatar.root>
Anatomy
-
Root - Contains all the parts of an avatar.
-
Image - The image to render when it has loaded.
-
Fallback - Placeholder shown while loading or on error.
API Reference
Root
Contains all the parts of an avatar.
| Prop | Type | Default | Description |
|---|---|---|---|
id
|
string
|
—
|
id
Type
string
Default
—
Data attributes
| Attribute | Values | Description |
|---|---|---|
[data-status]
|
idle | loading | loaded | error
|
Reflects the loading status of the avatar image. |
Image
The image to render. By default it will only render when it has loaded. You can use the on_loading_status_change event if you need more control.
| Prop | Type | Default | Description |
|---|---|---|---|
alt
|
string
|
""
|
|
on_loading_status_change
|
string
|
nil
|
|
src
|
string
|
—
|
alt
Type
string
Default
""
on_loading_status_change
Type
string
Default
nil
src
Type
string
Default
—
Fallback
An element that renders when the image hasn't loaded. This means whilst it's loading, or if there was an error. If you notice a flash during loading, you can provide a delay_ms attribute to delay its rendering so it only renders for those with slower connections. For more control, use the on_loading_status_change event on Avatar.image.
| Prop | Type | Default | Description |
|---|---|---|---|
delay_ms
|
integer
|
nil
|
delay_ms
Type
integer
Default
nil
Examples
Clickable Avatar with tooltip
You can compose the Avatar with a Tooltip to display extra information.
<Tooltip.provider>
<Tooltip.root id="avatar-tooltip">
<Tooltip.trigger
id="avatar-tooltip-trigger"
content_id="avatar-tooltip-content"
as="div"
>
<Avatar.root id="avatar-tooltip-avatar" class="DemoAvatarRoot">
<Avatar.image
class="DemoAvatarImage"
src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
alt="Colm Tuite"
/>
<Avatar.fallback class="DemoAvatarFallback" delay_ms={600}>
CT
</Avatar.fallback>
</Avatar.root>
</Tooltip.trigger>
<Tooltip.content id="avatar-tooltip-content" side="top">
Colm Tuite
<Tooltip.arrow />
</Tooltip.content>
</Tooltip.root>
</Tooltip.provider>