Avatar
An image element with a fallback for representing the user.
Dependencies
- @radix-ui/react-avatar (opens in a new tab) - Avatar primitives
Examples
Shapes
Avatar component has 2 shapes: circle and square. By default, it is circle.
Sizes
Avatar component has 3 sizes: small, default and large. By default, it is default.
With Badge
If you want to add a badge to an avatar, you just need to add the overflow-visible class to the Avatar component to allow the badge to overflow out of the container. Then, you can add to the AvatarImage component the rounded class you need and finally you can add your badge inside the component.
Avatar Group
API Reference
To see the full API docs of Avatar component visit Radix Docs (opens in a new tab).
Avatar
| Prop | Type | Default |
|---|---|---|
shape | "circle" | "square" | "circle" |
size | enum | "base" |
AvatarGroup
| Prop | Type | Default |
|---|---|---|
shape | "circle" | "square" | "circle" |
size | enum | "base" |