Avatar

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

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.
Ads via Chakra UI

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, AvatarGroup } 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#

Avatar Props#

Avatar composes the Box component so you can pass all its props. These are props specific to the Avatar component:

NameTypeDescriptionDefault
colorScheme"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Color Schemes for Avatar are not implemented in the default theme. You can extend the theme to implement them.-
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-
size"sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "full" | "2xs""md"
srcstringThe image url of the `Avatar`-
srcSetstringList of sources to use for different screen resolutions-
variantstringVariants for Avatar are not implemented in the default theme. You can extend the theme to implement them.-

Avatar Group Props#

AvatarGroup composes the Box component so you can pass all its props. These are props specific to the AvatarGroup component:

NameTypeDescriptionDefault
childrenrequiredReactNodeThe children of the avatar group. Ideally should be `Avatar` and `MoreIndicator` components-
colorScheme"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Color Schemes for AvatarGroup are not implemented in the default theme. You can extend the theme to implement them.-
maxnumberThe maximum number of visible avatars-
size"sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "full" | "2xs"-
spacingSystemProps["margin"]The space between the avatars in the group.-
variantstringVariants for AvatarGroup are not implemented in the default theme. You can extend the theme to implement them.-
Edit this page