Avatar
Displays a user image with initials fallback
Category: display · WCAG 2.2-AA · user, profile, image
Sizes
- xs
- sm
- md
- lg
- xl
States
- loading
- loaded
- error
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image source URL. |
alt | string | | Alternative text describing the image. |
name | string | — | Full name — used to derive initials for the fallback and as the accessible label. |
fallback | string | — | Explicit fallback text (initials/glyph); overrides initials derived from name. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
status | 'online' | 'offline' | 'busy' | — | Status state. |
Design tokens
--cascivo-color-accent-subtle--cascivo-color-success--cascivo-color-destructive--cascivo-radius-full
When to use
- Representing a person or entity with a thumbnail image and initials fallback
- Showing presence/status alongside an identity (status prop)
- Compactly identifying authors in lists, comments, and headers
When not to use
- Decorative imagery unrelated to identity — use a plain <img>
- A generic icon or logo with no person/entity meaning
How to build an accessible Avatar in React →
Examples
Image
<Avatar src="/jane.jpg" alt="Jane Doe" />Initials from name
Derives initials automatically; also sets the accessible label.
<Avatar name="Ada Lovelace" /> // renders "AL"Explicit fallback
<Avatar fallback="JD" alt="Jane Doe" />With status
<Avatar name="Jane Doe" status="online" />Related components
- Status — Use Status for a standalone state dot not attached to an identity