Avatar
presentationalImage or initials avatar with size and shape presets. Use accessible labels for people and decorative mode for repeated visual-only avatars.
Preview
Sizes
Shapes and image
Access review
Three assigned reviewers
Usage
import { Avatar } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';
<Avatar src="/team/maya.jpg" alt="Maya Patel" size="lg" />
<Avatar initials="AK" label="Ari Kim" shape="rounded" />
<Avatar initials="AK" decorative />Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | -- | Image source. Renders an <img> when set. |
alt | string | -- | Image alt text. Used as a fallback accessible label. |
initials | string | derived | Fallback initials when no image source is present. |
label | string | derived | Accessible label for initials fallback. |
decorative | boolean | false | Hides the avatar from assistive technology. |
size | 'sm' | 'md' | 'lg' | 'md' | Size preset. |
shape | 'circle' | 'rounded' | 'circle' | Border radius preset. |
loading | HTMLImageElement['loading'] | -- | Native image loading hint. |
decoding | HTMLImageElement['decoding'] | -- | Native image decoding hint. |
class | string | -- | Additional CSS classes. |
aria-label | string | -- | Accessible label override for initials fallback. |
Accessibility
- Images: Provide meaningful
alttext for user or organization avatars. - Initials: Initials fallbacks render
role="img"with an accessible label. - Decorative: Use
decorativewhen adjacent text already names the person or group.
Do / Don't
Do
Pair avatars with visible names in dense lists and mark the avatar decorative when the name is already present.
Don't
Don't rely on initials alone to identify a person when several people can share the same initials.