Avatar
Avatars function as personalized visual symbols, embodying users or entities within digital environments. These graphical representations are versatile, serving not only as profile pictures but also as placeholders in scenarios where images are not available.
Examples
Default
Default Avatar.
Titled Avatar
Add a title by passing the title prop to the component.
ion design
Detailed Avatar
Add a subtitle by passing the subtitle prop to the component.
ion design
It's great!
Initial Avatar
Use initials by passing the initials prop to the component.
ion design
It's great!
Icon Avatar
Use a custom fallback icon by passing the fallback prop to the component.
ion design
It's great!
Image Avatar
Use an image by passing the src prop to the component.
Samraaj Bath
ion design
Size
Change the size by passing the size prop to the component.
Status
Add a status to the top or bottom of the component by passing the topStatus or bottomStatus prop to the component, respectively.
online
Samraaj Bath
ion design
Samraaj Bath
ion design
inactive
Samraaj Bath
ion design
Samraaj Bath
ion design
away
Samraaj Bath
ion design
Samraaj Bath
ion design
offline
Samraaj Bath
ion design
Samraaj Bath
ion design
check
Samraaj Bath
ion design
Samraaj Bath
ion design
plus
Samraaj Bath
ion design
Samraaj Bath
ion design
delete
Samraaj Bath
ion design
Samraaj Bath
ion design
Installation
Properties
For more advanced usage, see https://www.radix-ui.com/primitives/docs/components/avatar (opens in a new tab).
Title for the Avatar.
Subtitle for the Avatar.
Size of the Avatar.
Url of the image shown in the Avatar.
Initials to show as fallback in the Avatar if src is not provided..
Fallback to show in the Avatar if src nor initials are provided.
Status indicator to be shown on the top right corner of the Avatar.
Status indicator to be shown on the bottom right corner of the Avatar.
Classname to style the Avatar.