Avatar

An image element with a fallback for representing the user.

Radix UI Avatar

When To Use

Use avatars to represent a user or entity. They're useful for:

User profiles
Account menus
Comment sections
Chat interfaces
User lists
Team members displays

Avatars provide a visual representation of users and can help make interfaces more personable and engaging.

Examples

Basic#

CNCHTP

Sizes#

XSSMMDLGXL

Fallback#

JDABCDEF404

Group#

CNCHTP+3

CNCHTP

Project Team

Props

Avatar

Prop	Type	Default
`asChild?`	`boolean`	-
`key?`	`Key \| null`	-

AvatarImage

Prop	Type	Default
`onLoadingStatusChange?`	`((status: ImageLoadingStatus) => void)`	-
`asChild?`	`boolean`	-
`width?`	`string \| number`	-
`useMap?`	`string`	-
`srcSet?`	`string`	-
`src?`	`string`	-
`sizes?`	`string`	-
`referrerPolicy?`	`HTMLAttributeReferrerPolicy`	-
`loading?`	`"eager" \| "lazy"`	-
`height?`	`string \| number`	-
`fetchPriority?`	`"auto" \| "high" \| "low"`	-
`decoding?`	`"async" \| "auto" \| "sync"`	-
`crossOrigin?`	`CrossOrigin`	-
`alt?`	`string`	-
`key?`	`Key \| null`	-

AvatarFallback

Prop	Type	Default
`delayMs?`	`number`	-
`asChild?`	`boolean`	-
`key?`	`Key \| null`	-

Aspect Ratio

Maintains a consistent width-to-height ratio for elements.

Badge

Small status descriptor for UI elements.