Avatar component is used to represent a user or product brand, it can display text, icons, or images.
shape can be a circle, rounded or square.sm, md and lg, it also allow to to set custom size.
backgroundColor & textColorBadge component.
+2| Prop | Description | Type | Default |
|---|---|---|---|
| shape | Shape of Avatar | 'rounded-sm' | 'square' | 'circle' | 'rounded-sm' |
| size | Size of Avatar | 'lg' | 'md' | 'sm' | number | 'md' |
| icon | Avatar Icon | ReactNode | - |
| src | Image url of Avatar image | string | - |
| srcSet | srcset attribute for Avatar image | string | - |
| alt | alt attribute for Avatar image | string | - |
| Prop | Description | Type | Default |
|---|---|---|---|
| chained | Whether to stack avatars within group | boolean | false |
| maxCount | Limited avatars to display & append an ommited avatar | number | 4 |
| omittedAvatarContent | Custom omitted avatar content | string | ReactNode | |
| omittedAvatarProps | Omitted avatar props | Object (Refer to Avatar props above) | - |
| omittedAvatarTooltip | Whether to enable tooltip for omitted avatar | boolean | false |
| onOmittedAvatarClick | Callback when omitted avatar clicked | () => void | - |
| omittedAvatarTooltipProps | Props for omitted avatar tooltip, refer to tooltip props for details | Object | - |