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
Image
that fades in on load. Automatically togglesstatus
. - AvatarFallback –
View
overlay that appears only if the image errors. Put initials or an icon inside.
Accessibility
- The root element exposes
accessibilityRole="image"
by default. - When
isDisabled
is set it addsaccessibilityState={{disabled:true}}
. AvatarFallback
content 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.