Avatar

The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

Import#

Chakra UI exports 3 avatar-related components:

  • Avatar: The image that represents the user.
  • AvatarBadge: A wrapper that displays its content on the right corner of the avatar.
  • AvatarGroup: A wrapper to stack multiple Avatars together.
import { Avatar, AvatarBadge } from "@chakra-ui/react"

Usage#

  • DA
  • KT
  • KD
  • RF
  • PO
  • CN
  • SA
Editable Example

Avatar Sizes#

The Avatar component comes in 7 sizes.

  • DA
  • KT
  • KD
  • RF
  • PO
  • CN
  • SA
Editable Example

Avatar Fallbacks#

If there is an error loading the src of the avatar, there are 2 fallbacks:

  • If there's a name prop, we use it to generate the initials and a random, accessible background color.
  • If there's no name prop, we use a default avatar.
OK
SU
Editable Example

Customize the fallback avatar#

You can customize the background color and icon of the fallback avatar icon to match your design requirements.

  • To update the background, pass the usual bg prop.
  • To update the icon svg, pass the icon prop.
Editable Example

Avatar with badge#

In some products, you might need to show a badge on the right corner of the avatar. We call this a badge. Here's an example that shows if the user is online:

Editable Example

Note the use of em for the size of the AvatarBadge. This is useful to size the badge relative to the avatar font size.

AvatarGroup#

In some cases, you might need to stack avatars as a group. Use the AvatarGroup component.

  • To limit the amount of avatars to show, use the max prop. It'll truncate the avatars and show a "+X" label (where X is the remaining avatars).
  • To size all the avatars equally, pass the size prop.
  • To adjust the spacing between the avatars, pass the spacing prop.
+3
SA
RF
Editable Example

Changing the initials logic#

Added getInitials prop to allow users to manage how initials are generated from name. By default we merge the first characters of each word in the name prop.

Props#

The Avatar component composes Box component so you can pass props for Box.

NameTypeDescriptionDefault
colorSchemestring-
getInitials((name: string) => string)Function to get the initials to display-
iconReact.ReactElementThe default avatar used as fallback when `name`, and `src` is not specified.-
loading"eager" | "lazy"Defines loading strategy-
namestringThe name of the person in the avatar. - if `src` has loaded, the name will be used as the `alt` attribute of the `img` - If `src` is not loaded, the name will be used to create the initials-
onError(() => void)Function called when image failed to load-
showBorderbooleanIf `true`, the `Avatar` will show a border around it. Best for a group of avatars-
sizestringThe size of the avatar.-
srcstringThe image url of the `Avatar`-
srcSetstringList of sources to use for different screen resolutions-
variantstring-
Edit this page