Sponsor

Avatars

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

Import#

Chakra UI exports 2 avatar related components:

  • Avatar: The image that represents the user.
  • AvatarBadge: A wrapper that displays it's content on the on the right corner of the avatar.
  • AvatarGroup: A wrapper to stack multiple Avatars together.

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 was 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

Avatar with badge#

In some products, you might need show a badge on the right corner of the avatar, what we call 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.
RF
SA
+3
Editable Example

Props#

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

NameTypeDefaultDescription
size2xs, xs, sm, md, lg, xl, 2xlmdThe size of the avatar
showBorderbooleanfalseIf true, the Avatar will show a border around it. Best for a group of avatars
namestringThe name of the user in the avatar
srcstringThe image url of the Avatar
childrenReact.ReactNodeThe badge at the bottom right corner of the Avatar.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo