Components
Avatar
A picture, initials or an icon for a person, and groups of them.
Avatar shows an image, initials or a person icon. AvatarGroup stacks avatars and ends in a +N
avatar when there are too many.
import Avatar from '@hone-ui/react/Avatar';
import AvatarGroup from '@hone-ui/react/AvatarGroup';Examples
AL
GH
KJ
<Avatar>AL</Avatar>
<Avatar variant="rounded">GH</Avatar>
<Avatar variant="square" />
<Avatar sx={{ bgcolor: 'primary.main', color: 'primary.contrastText' }}>KJ</Avatar>AL
GH
KJ
+2
<AvatarGroup max={4}>
<Avatar>AL</Avatar>
<Avatar>GH</Avatar>
<Avatar>KJ</Avatar>
<Avatar>MH</Avatar>
<Avatar>RS</Avatar>
</AvatarGroup>Avatar props
| Prop | Type | Default | Description |
|---|---|---|---|
src, srcSet, sizes | string | The image. | |
alt | string | The image's alt text. Its first letter is a fallback. | |
variant | 'circular', 'rounded', 'square' | 'circular' | The shape. |
slotProps.img, imgProps | img props | Props for the image. slotProps.img wins. | |
sx, className, style, ref, children | Standard. Children show when there is no image. |
AvatarGroup props
| Prop | Type | Default | Description |
|---|---|---|---|
max | number | 5 | The most avatars shown, counting the surplus avatar. |
total | number | number of children | Counts avatars you did not pass. |
spacing | 'medium', 'small', number | 'medium' | How far avatars overlap: 8px, 16px or pixels. |
variant | 'circular', 'rounded', 'square' | 'circular' | The shape of each avatar that sets none. |
renderSurplus | (surplus: number) => ReactNode | The surplus avatar's content. Defaults to +N. | |
slotProps.additionalAvatar | Avatar props | Props for the surplus avatar. | |
sx, className, style, ref | Standard. |
Notes
- A broken image falls back to children, then to the first letter of
alt, then to a person icon. - Initials use the text color on the grey fill, so they meet 4.5:1 contrast in light and dark mode.
- The
componentprop is not supported on either.
Accessibility
Give images alt. Name a group of people with role="group" and aria-label, and label the
surplus avatar through slotProps.additionalAvatar.