Avatar
An avatar is used to represent a user, team or another entity.
Props
- fallbackSrc?
- imageProps?
- isDisabled?
- name
- size?
- src?
- className?
- style?
The src of the image to display if the image fails to load. If set to null, the initials will be displayed instead. *
Props to add to the img element when src is provided.
Whether or not the avatar is disabled.
The name of the Avatar. This will be used for the alt text of the image or the initials if no image is provided.
The size of the avatar. *
The src of the image to display. If not provided, the initials will be displayed instead.
The CSS className for the element. A function may be provided to compute the class based on component state.
The inline style for the element. A function may be provided to compute the style based on component state.
- aria-label?
- aria-labelledby?
- aria-describedby?
- aria-details?
Defines a string value that labels the current element.
Identifies the element (or elements) that labels the current element.
Identifies the element (or elements) that describes the object.
Identifies the element (or elements) that provide a detailed, extended description for the object.
- slot?
A slot name for the component. Slots allow the component to receive props from a parent component.
An explicit null value indicates that the local props completely override all props received from a parent.
Examples
Local Image
An avatar can display a local image.
Remote image
An avatar can fetch a remote image.
Fallback image
A fallback image can be set in case the src fails to load.
Loading Failure
When an image fails to load, a default image will be displayed.
Double Failure
When the fallback image fails to load, a default image will be displayed.
Src and Fallback Bypass
If no fallback image is provided and the image fails to load, the initials will be displayed instead.
Anonymous
An anonymous avatar can be displayed.
Deleted
A deleted avatar can be displayed.
Sizes
An avatar can be displayed in different sizes.
Disabled
An avatar can be disabled.
Customize the image props
Using a custom hook to retry loading the image up to 5 times with a 250ms delay.