Avatar
An image element with a fallback for representing a user.
Usage
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
<Avatar size="lg" isBordered>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | – | Required. The image and fallback nodes. |
size | sm | md | lg | md | Controls the width/height preset. |
borderRadius | none | sm | md | lg | xl | full | full | Border-radius shortcut. |
isBordered | boolean | false | Adds a 2-pixel ring using theme border color. |
isDisabled | boolean | false | Lowers opacity & sets accessibilityState.disabled. |
variant | shadcn | warning | error | success | shadcn | Pre-made background colour variants. |
baseClassName | string | – | Extra Tailwind classes merged into the base wrapper. |
AvatarImage
All props of React-Native Image plus:
| Prop | Type | Description |
|---|---|---|
baseClassName | string | Tailwind classes merged into the image element. |
AvatarFallback
| Prop | Type | Description |
|---|---|---|
children | React.ReactNode | Initials or icon displayed when image errors. |
baseClassName | string | Tailwind classes for the fallback wrapper. |
Component Structure
<Avatar>
<AvatarImage /> // optional, hidden until loaded
<AvatarFallback /> // initials / icon shown on error
</Avatar>- Avatar – the root wrapper (
View) controlling size, radius, variant & accessibility state. - AvatarImage – React-Native
Imagethat fades in on load. Automatically togglesstatus. - AvatarFallback –
Viewoverlay that appears only if the image errors. Put initials or an icon inside.
Accessibility
- The root element exposes
accessibilityRole="image"by default. - When
isDisabledis set it addsaccessibilityState={{disabled:true}}. AvatarFallbackcontent is read by screen-readers as normal text ensuring a meaningful alternative when the image cannot load.- Stick to short initials (2–3 letters) or concise icons for best screen-reader experience.