Avatar
A person, as initials or a portrait.
Maya Chen
Jonas Weber
Priya Nair
Leo Santos
In context
Upload overlay
Tap the photo to change it.
Try a smaller photo
Your Details
Profile
Username
maria_kYour Details
Profile
Username
maria_kTap the photo to change it.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
src | string | undefined | No | — |
thumbSrc | string | undefined | No | — |
alt | string | undefined | No | — |
fallback | string | Yes | — |
className | string | undefined | No | — |
placeholder | number | boolean | undefined | No | — |
size | number | "sm" | "md" | "lg" | "xl" | undefined | No | md |
overlay | ReactNode | No | — |
badge | ReactNode | No | — |
loading | boolean | undefined | No | — |
invalid | boolean | undefined | No | — |
Accessibility
The initials are real text in the DOM, read even when no image loads. Pass a meaningful alt with a real src; with only fallback or placeholder the image is decorative and alt stays empty.
data-rebar-* attributes
data-rebar-component="avatar", data-rebar-size; data-rebar-part="fallback" on the initials.
Migrating to Ant Design
Not codemod-covered: AntD's Avatar takes fallback content as children, not a fallback prop, and has no illustrated placeholder, so a placeholder avatar needs a real src or plain initials.
thumbSrc blur-up
Pass thumbSrc (a tiny image) to show it blurred straight away while src loads, then fade the real image in, the same blur-up as Image. The initials stay hidden behind the thumb unless the image fails.
<Avatar src={photo} thumbSrc={photoTiny} fallback="MK" />