Import
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.
Note
The avatar uses a smart hierarchy method. If a source is provided and loads successfully - it will be shown. In all other cases, the fallback will be shown.
Sizes
You can change the size of an Avatar with the size prop.
Gradients
Use the gradient prop to use any gradient for the background color.
Group
Use the Group component to stack Avatars together.
Badge
Use the Float component to show badges.
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.
This is great for when you need to link the avatar to a profile page.
Customization
You can customize the Avatar any way you like with style props and data-selectors.
Primitives
The layers of the Avatar which can be used to create a fully custom solution.
| 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 |
Data Attributes
The primitives additionally use the following data attributes for custom styling:
| Name | Value | Description |
|---|---|---|
data-scope | avatar | The scope of the components. |
data-part | root | The root layer of the scope. |
data-part | fallback | The fallback layer of the scope. |
data-part | image | The image layer of the scope. |
API
Props
The Avatar component is an abstraction of the primitives and accepts the following props:
| Name | Default | Description |
|---|---|---|
fallback | The fallback content to display for the avatar. | |
src | The src of the avatar. | |
alt | The alt of the avatar. Required if using src. | |
gradient | none | The gradient theme to display |
size | md | This size of 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.
Note
It is best to only use the AvatarParts if you are building a custom solution. Importing Object based components will ship every property it includes into your bundle, regardless if you use it or not.
| 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). |
