Avatar
Demo
YWYWYWYWYWYWYWYWYWYW
YCAIYWAC+ 3
YCAIYWACMLBMUN
Props
AvatarProps
| Prop | Type | Description |
|---|---|---|
src | string (optional) | The source URL of the avatar image. |
fallback | string (optional) | Fallback text to display if the image fails to load or is not provided. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' (optional) | The size of the avatar. Options are 'xs', 'sm', 'md', 'lg', and 'xl'. |
border | boolean (optional) | If true, adds a border to the avatar. |
classNames | { root?: string; image?: string; fallback?: string } (optional) | Custom class names for different parts of the Avatar. |
onClick | () => void (optional) | Callback function when the avatar is clicked. |
AvatarGroupProps
| Prop | Type | Description |
|---|---|---|
avatars | { src?: string; fallback?: string }[] | An array of objects representing each avatar in the group. |
maxlength | number (optional) | The maximum number of avatars to display before showing a counter for additional avatars. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' (optional) | The size of the avatars in the group. |
className | string (optional) | Custom CSS class for additional styling. |
- The AvatarGroup displays multiple avatars in a compact, overlapping layout.
- Supports a maximum display length with a counter for additional avatars.
- Inherits the size and style properties from the Avatar component.
Styles
Avatar allows for custom styles via the classNames prop:
root: CSS class for styling the overall Avatar component.image: CSS class for styling the image element of the avatar.fallback: CSS class for styling the fallback text.