Avatar
The Avatar component is used to represent a user or entity.
Installation
Usage
The Avatar component is used to represent a user or entity.
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| src | The URL of the image to be displayed. | string | - |
| placeholder | The placeholder text to be displayed when the image is not available. | string | - |
| size | The size of the avatar. | number | 30 |
| className | The class name to be applied to the avatar. | string | - |
AvatarGroup
The AvatarGroup component is used to display multiple avatars in a group.
+2
+2
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| members | An array of objects containing the src and alt properties of the avatar. | Array<{ src: string; alt: string }> | - |
| limit | The maximum number of avatars to be displayed. | number | - |
| size | The size of the avatars. | number | 30 |
| className | The class name to be applied to the avatar group. | string | - |
AvatarWithBadge
The AvatarWithBadge component is used to display an avatar with a badge.
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| src | The URL of the image to be displayed. | string | - |
| badgeSrc | The URL of the badge image to be displayed. | string | - |
| size | The size of the avatar. | number | 30 |
| className | The class name to be applied to the avatar. | string | - |
| placeholder | The placeholder text to be displayed when the image is not available. | string | - |