alt
Description
The HTMLImageElement
property alt
.
Type
string
Leave Yamada UI a star
StarAvatar
is a component that displays a profile picture or an icon with initials representing a user.
Description
The HTMLImageElement
property alt
.
Type
string
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"
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"
Description
Function to get the initials to display.
Type
(name: string) => string
Description
The avatar icon to use.
Type
ReactElement<any, string | JSXElementConstructor<any>>
Description
If true
, opt out of the avatar's fallback
logic and renders the img
at all times.
Type
boolean
Default
false
Description
Defines loading strategy.
Type
"eager" | "lazy"
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
string
Description
Defining which referrer is sent when fetching the resource.
Type
HTMLAttributeReferrerPolicy
Description
The size of the Avatar.
Type
"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
Default
"md"
Description
The image url of the avatar.
Type
string
Description
List of sources to use for different screen resolutions.
Type
string
Description
The variant of the Avatar.
Type
string
Description
If true
, make an element scale and fade like a radar ping or ripple of water.
Type
boolean
Default
false
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"]'
Description
It is used for the count of the ping animation.
Type
AnimationIterationCount
Default
infinite
Description
It is used for the duration of the ping animation.
Type
AnimationDirection
Default
1.4s
Description
It is used for the scale of the ping animation.
Type
number
Default
1.8
Description
The placement of the badge.
Type
"bottom-end" | "bottom-start" | "top-end" | "top-start"
Default
'bottom-end'
Description
The maximum number of visible avatars.
Type
number
Edit this page on GitHub