Leave Yamada UI a star

Star
Yamada UIYamada UIv1.6.4

Avatar

Avatar is a component that displays a profile picture or an icon with initials representing a user.

Source@yamada-ui/avatar

Props

AvatarProps

alt

Description

The HTMLImageElement property alt.

Type

string

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) => string

icon

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

boolean

Default

false

loading

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

string

referrerPolicy

Description

Defining which referrer is sent when fetching the resource.

Type

HTMLAttributeReferrerPolicy

size

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

string

srcSet

Description

List of sources to use for different screen resolutions.

Type

string

variant

Description

The variant of the Avatar.

Type

string

AvatarBadgeProps

ping

Description

If true, make an element scale and fade like a radar ping or ripple of water.

Type

boolean

Default

false

pingColor

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

AnimationIterationCount

Default

infinite

pingDuration

Description

It is used for the duration of the ping animation.

Type

AnimationDirection

Default

1.4s

pingScale

Description

It is used for the scale of the ping animation.

Type

number

Default

1.8

placement

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

number

Edit this page on GitHub

PreviousFontawesome IconNextIndicator