Color Schemes for Avatar are not implemented in the default theme. You can extend the theme to implement them.
Avatar
The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
Props#
Avatar Props#
Avatar composes the Box component so you can pass all its props. These are
props specific to the Avatar component:
colorScheme
colorSchemeDescription
Type
stringgetInitials
getInitialsDescription
Function to get the initials to display
Type
((name: string) => string)icon
iconDescription
The default avatar used as fallback when name, and src
is not specified.
Type
React.ReactElementiconLabel
iconLabelType
stringignoreFallback
ignoreFallbackDescription
If true, opt out of the avatar's fallback logic and
renders the img at all times.
Type
booleanloading
loadingDescription
Defines loading strategy
Type
"eager" | "lazy"name
nameDescription
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
stringonError
onErrorDescription
Function called when image failed to load
Type
(() => void)referrerPolicy
referrerPolicyDescription
Defining which referrer is sent when fetching the resource.
Type
React.HTMLAttributeReferrerPolicyshowBorder
showBorderDescription
If true, the Avatar will show a border around it.
Best for a group of avatars
Type
booleansize
sizeType
"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"Default
"md"src
srcDescription
The image url of the Avatar
Type
stringsrcSet
srcSetDescription
List of sources to use for different screen resolutions
Type
stringvariant
variantDescription
Variants for Avatar are not implemented in the default theme. You can extend the theme to implement them.
Type
stringAvatar Group Props#
AvatarGroup composes the Box component so you can pass all its props. These
are props specific to the AvatarGroup component:
childrenrequired
childrenrequiredDescription
The children of the avatar group.
Ideally should be Avatar and MoreIndicator components
Type
ReactNodecolorScheme
colorSchemeDescription
Color Schemes for AvatarGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
stringmax
maxDescription
The maximum number of visible avatars
Type
numbersize
sizeDescription
Sizes for AvatarGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
stringspacing
spacingDescription
The space between the avatars in the group.
Type
SystemProps["margin"]Default
"-0.75rem"variant
variantDescription
Variants for AvatarGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
stringProps#
Avatar Props#
Avatar composes the Box component so you can pass all its props. These are
props specific to the Avatar component:
colorScheme
colorSchemeDescription
Color Schemes for Avatar are not implemented in the default theme. You can extend the theme to implement them.
Type
stringgetInitials
getInitialsDescription
Function to get the initials to display
Type
((name: string) => string)icon
iconDescription
The default avatar used as fallback when name, and src
is not specified.
Type
React.ReactElementiconLabel
iconLabelType
stringignoreFallback
ignoreFallbackDescription
If true, opt out of the avatar's fallback logic and
renders the img at all times.
Type
booleanloading
loadingDescription
Defines loading strategy
Type
"eager" | "lazy"name
nameDescription
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
stringonError
onErrorDescription
Function called when image failed to load
Type
(() => void)referrerPolicy
referrerPolicyDescription
Defining which referrer is sent when fetching the resource.
Type
React.HTMLAttributeReferrerPolicyshowBorder
showBorderDescription
If true, the Avatar will show a border around it.
Best for a group of avatars
Type
booleansize
sizeType
"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"Default
"md"src
srcDescription
The image url of the Avatar
Type
stringsrcSet
srcSetDescription
List of sources to use for different screen resolutions
Type
stringvariant
variantDescription
Variants for Avatar are not implemented in the default theme. You can extend the theme to implement them.
Type
stringAvatar Group Props#
AvatarGroup composes the Box component so you can pass all its props. These
are props specific to the AvatarGroup component:
childrenrequired
childrenrequiredDescription
The children of the avatar group.
Ideally should be Avatar and MoreIndicator components
Type
ReactNodecolorScheme
colorSchemeDescription
Color Schemes for AvatarGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
stringmax
maxDescription
The maximum number of visible avatars
Type
numbersize
sizeDescription
Sizes for AvatarGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
stringspacing
spacingDescription
The space between the avatars in the group.
Type
SystemProps["margin"]Default
"-0.75rem"variant
variantDescription
Variants for AvatarGroup are not implemented in the default theme. You can extend the theme to implement them.
Type
string