Avatar
Display user profile images, initials or fallback icons.
Sizes
size is in pixels. The default is 40.
Types
The avatar shows the image from src. Without one, or when it fails to load, it shows up to two initials from fallbackText on a gradient. showInitials={false} keeps only the gradient, and fallback replaces it with your own node.
User avatar
UserAvatar is the avatar for a person: round, 20 px by default, with a user icon when there is no image. alt is both the accessible label and the fallback text.
Avatar Properties
Additional CSS classes to apply to the avatar container
URL or static-import object of the image to display
Accessible label for the avatar, and the source of the initials shown when there is no image or it fails to load
Show letter initials in the fallback
Default: true
Custom node rendered when the image is missing or fails
Alt text for the avatar image
Default: Avatar
ARIA role applied to the avatar image
Size of the avatar in pixels
Default: 40
Show loading skeleton state
Default: false
Size of the fallback text
Default: large
Load the image eagerly with high fetch priority
Default: false
UserAvatar Properties
Accessible label and fallback text
URL or static-import object of the profile image
Size of the avatar in pixels
Default: 20
Additional CSS classes to apply to the avatar