AvatarGroup API
API documentation for the React AvatarGroup component. Learn about the available props and the CSS API.
Import
import AvatarGroup from '@mui/material/AvatarGroup';
// or
import { AvatarGroup } from '@mui/material';
Component name
The nameMuiAvatarGroup
can be used when providing default props or style overrides in the theme.Props
Props of the native component are also available.
Name | Type | Default | Description |
---|---|---|---|
children | node | The avatars to stack. | |
classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
max | number | 5 | Max avatars to show before +x. |
spacing | 'medium' | 'small' | number | 'medium' | Spacing between avatars. |
sx | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
variant | 'circular' | 'rounded' | 'square' | string | 'circular' | The variant to use. |
The
ref
is forwarded to the root element.CSS
Rule name | Global class | Description |
---|---|---|
root | .MuiAvatarGroup-root | Styles applied to the root element. |
avatar | .MuiAvatarGroup-avatar | Styles applied to the avatar elements. |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverrides
property in a custom theme.