Avatar
An image element with a fallback for representing the user.
Examples
Variants
Preview
CN
CN
LR
ER
Fallback
Preview
ER
Sizes
Preview
CN
ER
LR
ER
With Badge
Preview
8CN
3ER
20LR
47ER
API
Avatar
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| size | ”sm” | “md” | “lg” | “xl" | "sm”, “md”, “lg”, “xl" | "md” | Sets the size of the avatar. |
| badge | React.ReactNode | - | - | Content displayed as a badge on the avatar (typically for notifications or counters). |
| className | string | - | - | Additional CSS classes to apply to the avatar. |
| children | React.ReactNode | - | - | Child components (typically AvatarImage and AvatarFallback). |
| …props | All Radix Avatar props | - | - | Allows passing any other standard properties of components. |
AvatarImage
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| src | string | - | - | The source URL of the avatar image. |
| alt | string | - | - | Alternative text for the avatar image. |
| className | string | - | - | Additional CSS classes to apply to the avatar image. |
| …props | All Radix AvatarImage props | - | - | Allows passing any other standard properties of components. |
AvatarFallback
| Property | Type | Possible values | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | - | User icon | Content to display when the avatar image fails to load. Defaults to a User icon if no children provided. |
| className | string | - | - | Additional CSS classes to apply to the avatar fallback. |
| …props | All Radix AvatarFallback props | - | - | Allows passing any other standard properties of components. |
Last updated on