Avatar
A visual representation of a person or a person's name.
Examples
Show as image or initials
The avatar can display initials of a name or an image src. While the image loads the name initials will be displayed.
If neither image src or name is provided (or if image fails to load), an icon will be shown as fallback.
JD
Sizes
Accessibility
- The
nameproperty is required for screen readers to announce the name of the person represented by the avatar. - If you want to display initials using the
nameproperty but also need to provide a custom alternative text for the image, use theimageAltproperty alongsidename.
API Reference
| Prop | Default | Description |
|---|---|---|
name? | - | stringName of the user. Used to generate the initials if no image is provided, but also for accessibility. |
src? | - | stringSource url of the image to display. If not passed it will display a fallback icon. |