Data display
Avatar
A small circle with a profile image or initials.
| Class name | Type | Description |
|---|---|---|
avatarplf:avatar | Component | A round profile picture |
avatar-imageplf:avatar-image | Part | The profile image |
avatar-fallbackplf:avatar-fallback | Part | Initials in place of an image |
avatar-smplf:avatar-sm | Size | Small |
avatar-lgplf:avatar-lg | Size | Large |
Default
Give an image that identifies someone a meaningful alt.
<span class="avatar">
<img class="avatar-image" src="/previews/assets/avatar-sample.svg" alt="Alex Morgan">
</span><span class="plf:avatar">
<img class="plf:avatar-image" src="/previews/assets/avatar-sample.svg" alt="Alex Morgan">
</span>import { Avatar, AvatarImage } from '@pelatform/react';
export function Example() {
return (
<Avatar>
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="Alex Morgan" />
</Avatar>
);
}import { Avatar, AvatarImage } from '@pelatform/react/prefixed';
export function Example() {
return (
<Avatar>
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="Alex Morgan" />
</Avatar>
);
}<span class="avatar avatar-sm">
<img class="avatar-image" src="/previews/assets/avatar-sample.svg" alt="Alex Morgan">
</span>
<span class="avatar">
<img class="avatar-image" src="/previews/assets/avatar-sample.svg" alt="Alex Morgan">
</span>
<span class="avatar avatar-lg">
<img class="avatar-image" src="/previews/assets/avatar-sample.svg" alt="Alex Morgan">
</span><span class="plf:avatar plf:avatar-sm">
<img class="plf:avatar-image" src="/previews/assets/avatar-sample.svg" alt="Alex Morgan">
</span>
<span class="plf:avatar">
<img class="plf:avatar-image" src="/previews/assets/avatar-sample.svg" alt="Alex Morgan">
</span>
<span class="plf:avatar plf:avatar-lg">
<img class="plf:avatar-image" src="/previews/assets/avatar-sample.svg" alt="Alex Morgan">
</span>import { Avatar, AvatarImage } from '@pelatform/react';
export function Example() {
return (
<>
<Avatar size="sm">
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="Alex Morgan" />
</Avatar>
<Avatar>
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="Alex Morgan" />
</Avatar>
<Avatar size="lg">
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="Alex Morgan" />
</Avatar>
</>
);
}import { Avatar, AvatarImage } from '@pelatform/react/prefixed';
export function Example() {
return (
<>
<Avatar size="sm">
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="Alex Morgan" />
</Avatar>
<Avatar>
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="Alex Morgan" />
</Avatar>
<Avatar size="lg">
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="Alex Morgan" />
</Avatar>
</>
);
}Initials
Initials do not name a person, so give the avatar role="img" and the full name in aria-label.
<span class="avatar avatar-sm" role="img" aria-label="Alex">
<span class="avatar-fallback" aria-hidden="true">AL</span>
</span>
<span class="avatar" role="img" aria-label="Jordan">
<span class="avatar-fallback" aria-hidden="true">JR</span>
</span>
<span class="avatar avatar-lg" role="img" aria-label="Sam">
<span class="avatar-fallback" aria-hidden="true">SM</span>
</span><span class="plf:avatar plf:avatar-sm" role="img" aria-label="Alex">
<span class="plf:avatar-fallback" aria-hidden="true">AL</span>
</span>
<span class="plf:avatar" role="img" aria-label="Jordan">
<span class="plf:avatar-fallback" aria-hidden="true">JR</span>
</span>
<span class="plf:avatar plf:avatar-lg" role="img" aria-label="Sam">
<span class="plf:avatar-fallback" aria-hidden="true">SM</span>
</span>import { Avatar, AvatarFallback } from '@pelatform/react';
export function Example() {
return (
<>
<Avatar size="sm" role="img" aria-label="Alex">
<AvatarFallback>AL</AvatarFallback>
</Avatar>
<Avatar role="img" aria-label="Jordan">
<AvatarFallback>JR</AvatarFallback>
</Avatar>
<Avatar size="lg" role="img" aria-label="Sam">
<AvatarFallback>SM</AvatarFallback>
</Avatar>
</>
);
}import { Avatar, AvatarFallback } from '@pelatform/react/prefixed';
export function Example() {
return (
<>
<Avatar size="sm" role="img" aria-label="Alex">
<AvatarFallback>AL</AvatarFallback>
</Avatar>
<Avatar role="img" aria-label="Jordan">
<AvatarFallback>JR</AvatarFallback>
</Avatar>
<Avatar size="lg" role="img" aria-label="Sam">
<AvatarFallback>SM</AvatarFallback>
</Avatar>
</>
);
}Missing images
Avatar does not detect a failed image: your code hides the image with hidden and shows an avatar-fallback.
<span class="avatar" role="img" aria-label="Jordan">
<img class="avatar-image" src="/previews/assets/avatar-sample.svg" alt="" hidden>
<span class="avatar-fallback" aria-hidden="true">JR</span>
</span><span class="plf:avatar" role="img" aria-label="Jordan">
<img class="plf:avatar-image" src="/previews/assets/avatar-sample.svg" alt="" hidden>
<span class="plf:avatar-fallback" aria-hidden="true">JR</span>
</span>import { Avatar, AvatarFallback, AvatarImage } from '@pelatform/react';
export function Example() {
return (
<Avatar role="img" aria-label="Jordan">
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="" hidden />
<AvatarFallback>JR</AvatarFallback>
</Avatar>
);
}import { Avatar, AvatarFallback, AvatarImage } from '@pelatform/react/prefixed';
export function Example() {
return (
<Avatar role="img" aria-label="Jordan">
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="" hidden />
<AvatarFallback>JR</AvatarFallback>
</Avatar>
);
}Alongside a name
Beside a visible name, as in this Item, the image is decorative: give it alt="".
Alex Morgan
Workspace administrator
<div class="item">
<span class="item-media">
<span class="avatar avatar-lg">
<img class="avatar-image" src="/previews/assets/avatar-sample.svg" alt="">
</span>
</span>
<div class="item-content">
<p class="item-title">Alex Morgan</p>
<p class="item-description">Workspace administrator</p>
</div>
</div><div class="plf:item">
<span class="plf:item-media">
<span class="plf:avatar plf:avatar-lg">
<img class="plf:avatar-image" src="/previews/assets/avatar-sample.svg" alt="">
</span>
</span>
<div class="plf:item-content">
<p class="plf:item-title">Alex Morgan</p>
<p class="plf:item-description">Workspace administrator</p>
</div>
</div>import { Avatar, AvatarImage, Item, ItemContent, ItemDescription } from '@pelatform/react';
export function Example() {
return (
<Item>
<span className="item-media">
<Avatar size="lg">
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="" />
</Avatar>
</span>
<ItemContent>
<p className="item-title">Alex Morgan</p>
<ItemDescription>Workspace administrator</ItemDescription>
</ItemContent>
</Item>
);
}import { Avatar, AvatarImage, Item, ItemContent, ItemDescription } from '@pelatform/react/prefixed';
export function Example() {
return (
<Item>
<span className="plf:item-media">
<Avatar size="lg">
<AvatarImage src="/previews/assets/avatar-sample.svg" alt="" />
</Avatar>
</span>
<ItemContent>
<p className="plf:item-title">Alex Morgan</p>
<ItemDescription>Workspace administrator</ItemDescription>
</ItemContent>
</Item>
);
}React
Avatar from @pelatform/react renders this markup from its props, and each part is a component of its own.
| Prop | Values | Default |
|---|---|---|
size |
sm, lg |
The default size |
The parts:
| Part | Element |
|---|---|
AvatarImage |
An img with avatar-image |
AvatarFallback |
A span with avatar-fallback and aria-hidden="true", which hides its initials from screen readers |
Other props are the element’s own, className and ref included.
CSS variables
Override on a root or on a single avatar.
| Variable | Default |
|---|---|
--plf-avatar-size |
2. (40px); 2rem (32px) with avatar-sm, 3rem (48px) with avatar-lg |
--plf-avatar-font-size |
--plf-font-size-sm (14px); --plf-font-size-xs (12px) with avatar-sm, --plf-font-size-body (16px) with avatar-lg |
--plf-avatar-bg |
Muted surface |
--plf-avatar-color |
Text |
--plf-avatar-border |
--plf-color-border-subtle |
<span class="avatar" role="img" aria-label="Jordan" style="--plf-avatar-size: 64px; --plf-avatar-font-size: 20px">
<span class="avatar-fallback" aria-hidden="true">JR</span>
</span><span class="plf:avatar" role="img" aria-label="Jordan" style="--plf-avatar-size: 64px; --plf-avatar-font-size: 20px">
<span class="plf:avatar-fallback" aria-hidden="true">JR</span>
</span>import type { CSSProperties } from 'react';
import { Avatar, AvatarFallback } from '@pelatform/react';
export function Example() {
return (
<Avatar
role="img"
aria-label="Jordan"
style={{ '--plf-avatar-size': '64px', '--plf-avatar-font-size': '20px' } as CSSProperties}
>
<AvatarFallback>JR</AvatarFallback>
</Avatar>
);
}import type { CSSProperties } from 'react';
import { Avatar, AvatarFallback } from '@pelatform/react/prefixed';
export function Example() {
return (
<Avatar
role="img"
aria-label="Jordan"
style={{ '--plf-avatar-size': '64px', '--plf-avatar-font-size': '20px' } as CSSProperties}
>
<AvatarFallback>JR</AvatarFallback>
</Avatar>
);
}