Coming from Orbiter, you should be aware of the following changes:
retryCount
has been removed.onClick
has been renamed toonPress
to be closer to the React Aria API.
An avatar is used to represent a user, team or another entity.
An avatar can display a local image.
An avatar can fetch a remote image.
A fallback image can be set in case the src
fails to load.
When an image fails to load, a default image will be displayed.
When the fallback image fails to load, a default image will be displayed.
If no fallback image is provided and the image fails to load, the initials will be displayed instead.
An anonymous avatar can be displayed.
A deleted avatar can be displayed.
A broken avatar can be displayed.
An avatar can be displayed in different sizes.
An avatar can be disabled.
An avatar can be pressed, which will trigger an action when pressed.
Using a custom hook to retry loading the image up to 5 times with a 250ms delay.
An avatar group can be used to display multiple avatars.
When there are too many avatars, a counter will be displayed.
An avatar group can be displayed in different sizes.
An avatar group can have pressable avatars, which will trigger an action when pressed.
An avatar group can be limited to a maximum number of avatars.
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.
Called when the avatar is pressed
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.
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.
The size of the avatar.
The maximum number of avatars to show before showing the overflow indicator.
Whether or not to wrap the avatars.
Whether or not to reverse the order of the avatars.
The alignment of the avatars within the AvatarGroup.
The content of the AvatarGroup.
The inline style for the element.
The CSS className for the element.
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.
The element's unique identifier. See MDN.
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.
Coming from Orbiter, you should be aware of the following changes:
retryCount
has been removed.onClick
has been renamed to onPress
to be closer to the React Aria API.