alt
Description
The HTMLImageElement property alt.
Type
stringAvatar
Avatar is a component that displays a profile picture or an icon with initials representing a user.
Props
AvatarProps
colorScheme
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"crossOrigin
Description
The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded. This tells the browser to request cross-origin access when trying to download the image data.
Type
"" | "anonymous" | "use-credentials"format
Description
Function to get the initials to display.
Type
(name: string) => stringicon
Description
The avatar icon to use.
Type
ReactElement<any, string | JSXElementConstructor<any>>ignoreFallback
Description
If true, opt out of the avatar's fallback logic and renders the img at all times.
Type
booleanDefault
falseloading
Description
Defines loading strategy.
Type
"eager" | "lazy"name
Description
The name of the person in the avatar.
- If src has loaded, the name will be used as the alt attribute of the img
- If src is not loaded, the name will be used to create the initials
Type
stringreferrerPolicy
Description
Defining which referrer is sent when fetching the resource.
Type
HTMLAttributeReferrerPolicysize
Description
The size of the Avatar.
Type
"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"Default
"md"src
Description
The image url of the avatar.
Type
stringsrcSet
Description
List of sources to use for different screen resolutions.
Type
stringvariant
Description
The variant of the Avatar.
Type
stringAvatarBadgeProps
ping
Description
If true, make an element scale and fade like a radar ping or ripple of water.
Type
booleanDefault
falsepingColor
Description
It is used for the color of the ping animation.
Type
UIValue<"border" | BackgroundColor | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | ... 320 more ... | "yellow.950">Default
'["blackAlpha.400", "whiteAlpha.500"]'pingCount
Description
It is used for the count of the ping animation.
Type
AnimationIterationCountDefault
infinitepingDuration
Description
It is used for the duration of the ping animation.
Type
AnimationDirectionDefault
1.4spingScale
Description
It is used for the scale of the ping animation.
Type
numberDefault
1.8placement
Description
The placement of the badge.
Type
"bottom-end" | "bottom-start" | "top-end" | "top-start"Default
'bottom-end'AvatarGroupProps
max
Description
The maximum number of visible avatars.
Type
numberEdit this page on GitHub