Avatar

Usage

import { Avatar, AvatarGroup } from "@chakra-ui/react"

<AvatarGroup>
  <Avatar.Root>
    <Avatar.Fallback />
    <Avatar.Image />
  </Avatar.Root>
</AvatarGroup>

:::info

If you prefer a closed component composition, check out the snippet below.

:::

Examples

Sizes

Use the size prop to change the size of the avatar

Variants

Use the variant prop to change the variant of the avatar

Shape

Use the shape prop to change the shape of the avatar, from rounded to square

Colors

Use the colorPalette prop to change the color of the avatar

Fallback

Render Avatar.Icon as the fallback when the name is not provided or when the image fails to load.

Random Color

Combine the colorPalette prop with some custom logic to dynamically change the color of the avatar

Ring

Use the outline* props to add a ring around the avatar

Group

Use the Group component to group multiple avatars together

Stacking

When using the AvatarGroup component, you can use the stacking prop to change the stacking order of the avatars

Persona

Here's an example of how to use the Avatar component to display a user persona.

Badge

Show a badge on the right corner of the avatar by composing the Float and Circle components

Overflow

Here's an example of how to handle an overflow of avatars by composing the Menu and Avatar components.

Next.js

Here's an example of how to compose the avatar with Next.js Image.

import { getImageProps } from "next/image"

function Demo() {
  const imageProps = getImageProps({
    src: "/image.png",
  })
  return (
    <Avatar.Root>
      <Avatar.Fallback name="Segun Adebayo" />
      <Avatar.Image {...imageProps} />
    </Avatar.Root>
  )
}

Store

An alternative way to access the avatar state and methods is to use the RootProvider component and the useAvatar store hook.

Closed Component

Here's how to setup the Avatar for a closed component composition.

If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add avatar

Props

Root

Fallback

Image

Explorer

Explore the Avatar component parts interactively. Click on parts in the sidebar to highlight them in the preview.