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.

import { Avatar } from '@cerberus/react'
import { HStack } from 'styled-system/jsx'

export function AvatarPreview() {
  return (
    <HStack justify="center" w="3/4">
      <Avatar fallback="xs" size="xs" />
      <Avatar fallback="sm" gradient="charon-light" size="sm" />
      <Avatar fallback="md" gradient="charon-dark" size="md" />
      <Avatar fallback="lg" gradient="nyx-light" size="lg" />
      <Avatar fallback="xl" gradient="nyx-dark" size="xl" />
      <Avatar fallback="2x" gradient="amphiaraus-light" size="2xl" />
      <Avatar fallback="3x" gradient="amphiaraus-dark" size="3xl" />
      <Avatar fallback="4x" gradient="hades-dark" size="4xl" />
    </HStack>
  )
}

`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.

import { Avatar } from '@cerberus/react'
import { css } from 'styled-system/css'
import Image from 'next/image'
import Link from 'next/link'

function NextAvatar() {
  return (
    <AvatarRoot size="lg" asChild>
      <Link href="/">
        <Image
          alt="Protector Cerberus"
          className={css({
            objectFit: 'cover',
          })}
          src="https://cerberus.digitalu.design/logo.svg"
          height={50}
          width={50}
        />
      </Link>
    </AvatarRoot>
  )
}

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

import { Avatar } from '@cerberus/react'
import { css } from 'styled-system/css'

function CustomAvatar() {
  return (
    <Avatar
      css={{
        bgColor: 'black',
        bgImage: 'none',
        border: '6px solid',
        borderColor: 'danger.border.initial',
        color: 'danger.text.initial',
        fontFamily: 'sans',
        transform: 'skewX(-10deg)',
      }}
      size="4xl"
      fallback="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

Edit this page on Github