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
nameprop, we use it to generate the initials and a random, accessible background color. - If there's no
nameprop, 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
maxprop. 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
spacingprop.
RF
SA
+3
Editable Example
Props#
The Avatar component composes Box component so you can pass props for Box.
| Name | Type | Default | Description |
|---|---|---|---|
| size | 2xs, xs, sm, md, lg, xl, 2xl | md | The size of the avatar |
| showBorder | boolean | false | If true, the Avatar will show a border around it. Best for a group of avatars |
| name | string | The name of the user in the avatar | |
| src | string | The image url of the Avatar | |
| children | React.ReactNode | The badge at the bottom right corner of the Avatar. |