Avatar

The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.

    SourceTheme source@chakra-ui/avatar

Props#

Avatar Props#

Avatar composes the Box component so you can pass all its props. These are props specific to the Avatar component:

colorScheme

Description

The visual color appearance of the component

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

getInitials

Description

Function to get the initials to display

Type
(name: string) => string

icon

Description

The default avatar used as fallback when name, and src is not specified.

Type
ReactElement<any, string | JSXElementConstructor<any>>

iconLabel

Type
string

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

onError

Description

Function called when image failed to load

Type
() => void

referrerPolicy

Description

Defining which referrer is sent when fetching the resource.

Type
HTMLAttributeReferrerPolicy

showBorder

Description

If true, the Avatar will show a border around it. Best for a group of avatars

Type
boolean
Default
false

size

Description

The size of the Avatar

Type
"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"
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

Avatar Group Props#

AvatarGroup composes the Box component so you can pass all its props. These are props specific to the AvatarGroup component:

max

Description

The maximum number of visible avatars

Type
number

spacing

Description

The space between the avatars in the group.

Type
ResponsiveValue<string | number | (string & {})>
Default
-0.75rem
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel