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.

You can use the asChild prop to render the Avatar component as a different element. Cerberus will pass all the props onto your child.

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

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

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