Avatar
Personalize your application with avatars
Source ↗️ Report Issue ↗️Use the Avatar
component with photographs, illustrations, or initials to personalize and identify users within your application. Pass multiple image paths to create avatar groups.
Colors
To style border colors, specify the borderColor
property. To remove borders, set borderless
to true
:
However, if you need to use the same border color for your avatars throughout your application, the preferred way to set border colors globally, is to override the following CSS variable:
Avatar Groups
The Avatar
component can also be used to create avatar groups. The img
prop can also accept an array of strings.
Sizes
You can also set sizes through the size
prop which accepts a number, or an array of numbers in case an avatar group is used:
API
Prop | Default | Purpose |
---|---|---|
img | - | Specifies the image path to your avatar. Can be a string or an array of strings. |
alt | - | Specifies the alt attribute for the image. Can be a string or an array of strings. |
size | 40 | Sets the size of the image. Can be a number or an array of numbers for avatar groups. |
lazy | true | Specifies whether to lazy load images. |
borderColor | - | Sets the image border color. Defaults to the background color. |
borderless | false | Removes border from images. |
reverse | false | Reverse avatar group order. |
className | - | Pass additional CSS classes for your avatars. |
groupClassName | - | Pass additional CSS classes for the avatar group container. |
Request improvement for this page