Avatar

Avatar is a component that displays a profile picture or an icon with initials representing a user.

Import

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

Copied!

Avatar: A component that displays an image representing a user.
AvatarBadge: A component that displays content in the corner of an avatar.
AvatarGroup: A wrapper component for stacking multiple avatars.

Usage

Editable example

<Avatar
  name="Hirotomo Yamada"
  src="https://avatars.githubusercontent.com/u/84060430?v=4"
/>

Copied!

Change Size

Editable example

<Wrap gap="md">
  <Avatar size="2xs" name="Hirotomo Yamada" />
  <Avatar size="xs" name="Hirotomo Yamada" />
  <Avatar size="sm" name="Hirotomo Yamada" />
  <Avatar size="md" name="Hirotomo Yamada" />
  <Avatar size="lg" name="Hirotomo Yamada" />
  <Avatar size="xl" name="Hirotomo Yamada" />
  <Avatar size="2xl" name="Hirotomo Yamada" />
</Wrap>

Copied!

Display Initials

When you set a string to name, it generates a random background color based on the initials and the provided string.

If you want to format the initials, use format.

If you want to customize the background color, specify the color with bg, background, or backgroundColor.

Editable example

<Wrap gap="md">
  <Avatar name="Hirotomo Yamada" />

  <Avatar
    name="Hirotomo Yamada"
    format={(name) => {
      const names = name.split(" ")
      const firstName = names[0] || ""
      const lastName = names.length > 1 ? names[names.length - 1] : ""

      return firstName && lastName
        ? `${lastName.charAt(0)}${firstName.charAt(0)}`
        : firstName.charAt(0)
    }}
  />
</Wrap>

Copied!

Display an Image

If you want to display an image in the avatar, set the path to src.

Editable example

<Avatar src="https://avatars.githubusercontent.com/u/84060430?v=4" />

Copied!

Add a Badge

In some applications, you may want to show whether a user is online or not. In that case, use the AvatarBadge component.

You can change the position of the badge by setting placement. The default is "bottom-end".

Editable example

<Wrap gap="md">
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  >
    <AvatarBadge bg="primary" />
  </Avatar>

  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  >
    <AvatarBadge bg="secondary" placement="top-start" />
  </Avatar>

  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  >
    <AvatarBadge bg="green" placement="top-end" />
  </Avatar>

  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  >
    <AvatarBadge bg="pink" placement="bottom-start" />
  </Avatar>

  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  >
    <AvatarBadge bg="red" placement="bottom-end" />
  </Avatar>
</Wrap>

Copied!

Highlight the Badge

Editable example

<Avatar
  name="Hirotomo Yamada"
  src="https://avatars.githubusercontent.com/u/84060430?v=4"
>
  <AvatarBadge bg="primary" ping pingColor="primary.300" pingScale={2} />
</Avatar>

Copied!

Style the Badge

Editable example

<Avatar
  name="Hirotomo Yamada"
  src="https://avatars.githubusercontent.com/u/84060430?v=4"
>
  <AvatarBadge bg="red" borderColor="white" />
</Avatar>

Copied!

Fallback

There are two fallbacks if the loading of src fails:

If name is provided: It uses a random background color based on the initials and the provided string.
If name is not provided: It uses the default avatar icon.

Editable example

<Wrap gap="md">
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <Avatar name="Hirotomo Yamada" src="https://not-found.com" />
  <Avatar src="https://not-found.com" />
</Wrap>

Copied!

Customize the Fallback

Here is an example of customizing the fallback icon and background color.

Editable example

<Wrap gap="md">
  <Avatar bg="secondary" src="https://not-found.com" />
  <Avatar icon={<Ghost />} src="https://not-found.com" />
</Wrap>

Copied!

Avatar Group

If you want to control the number of avatars displayed, specify a number with max. If there are more avatars than the specified number, it truncates and displays the remaining avatars as +X.

Editable example

<AvatarGroup max={3}>
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
  <Avatar
    name="Hirotomo Yamada"
    src="https://avatars.githubusercontent.com/u/84060430?v=4"
  />
</AvatarGroup>

Copied!

Edit this page on GitHub

PreviousFontawesome Icon NextIndicator