Avatar
The Avatar component is used to represent a user or entity, displaying a profile picture, initials, or a generic icon.
import { Avatar } from '@cerberus/react'Usage
The Avatar component is used to represent a user or entity. It can be used to display a user's profile picture, initials, or a generic icon.
xs![]()
sm![]()
md![]()
lg![]()
xl![]()
2x![]()
3x![]()
4x![]()
asChild Prop
You can use the asChild prop to render the Avatar component as a different element. Cerberus will pass all the props onto your child.
Primitives
You can utilize the primitive components or the css prop to customize the avatar.
| Component | Description |
|---|---|
| AvatarRoot | The context provider for the Avatar parts |
| AvatarImage | The img of the avatar |
| AvatarFallback | The fallback content to display for the avatar |
Cu![]()
API
Props
The Avatar component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
| gradient | none | The gradient theme to display |
| size | md | This size of the avatar. |
| alt | The alt of the avatar. | |
| src | The src of the avatar. | |
| fallback | The fallback content to display for the avatar. |
The Avatar component also accepts all the props of the AvatarRoot primitive props
Parts
The AvatarParts API is an Object containing the full family of components.
| Name | Description |
|---|---|
| Root | The AvatarRoot component which is the Provider for the family. |
| Image | The AvatarImage component which displays the image. |
| Fallback | The AvatarFallback component which is the content to show when there is no image (or it fails to load). |
On this page