Show · Avatar
Avatar
Avatar, used for image or text display.

Demos

How to import

Size

You can change the size of the avatars with size property. The following sizes are supported: extra-extra-small(20x20), extra-small(24x24),small(32x32), default(40x40), medium(48x48), large(72x72), extra-large(128 x 128).

Color

Avatars support 16 colors including white, amber, blue, cyan, green, grey, indigo, light-blue, light-green, lime, orange, pink, purple, red, teal, violet, and yellow. You can also use the style prop to customize styles. The default color isgrey.

Adaptive character size

For the avatar of the character type, the font size will be adjusted adaptively according to the width of the avatar. Use gap to adjust the pixel size on the left and right sides of the character avatar distance.

Image

Image avatars can be created by using the src or srcSet prop.

Shape

Avatars support two shapes: circle and square. The shape is default to circle.

Event

Avatars support onClick,onMouseEnter,onMouseLeave. You can use the hoverMask prop to pass in overlay content for hover state. The overlay has no default style.

Top and Bottom Slot

Top

Bottom

Additional border

Additional Animation

Turn on additional animation effects for borders and content areas through border={motion:true} and contentMotion

AvatarGroup

You can use AvatarGroup component to display avatars as a group.
You can set the number of avatars to display with maxCount property.
You can customize the more tag with renderMore.
You can set the coverage direction of the avatars with overlapFrom. It has two optional values A and B. The default value is start.

API Reference

Avatar

PropertiesInstructionstypeDefault
altDefines an alternative text description of the image.string-
borderadditional border（>=2.52.0）{color?:string //color, motion?:boolean // has animation} or boolean-
bottomSlotbottom Slot config （>= 2.52.0 ）{
render?: () => React.ReactNode //Full control the rendering,
shape?: "circle" or "square" // slot shape,
content: React.ReactNode // slot content,
bgColor:string // slot background
textColor:string // text color
className:string
style?:CSSProperties
}		-
classNameClass namestring-
colorColor of the avatar, one of amber, blue, cyan, green, grey, indigo, light-blue, light-green, lime, orange, pink, rain, red, teal, violet, yellow, whitestringgrey
contentMotionavatar content area animation （>=2.xx.0）boolean-
gapPixel size of the distance between the left and right sides of the character avatarnumber3
hoverMaskAvatar content overlay when hoverReactNode-
imgAttrNative html img attributes >=1.5.0React.ImgHTMLAttributes<HTMLImageElement>-
shapeShape of the avatar, one of circle, squarestringcircle
sizeSize of the avatar, one of extra-extra-small,extra-small, small, default, medium, large, extra-largestringmedium
srcResource address for imgage avatarsstring-
srcSetSet the image avatar responsive resource addressstring-
styleStyle nameCSSProperties-
topSlottop Slot config （>= 2.52.0 ）{
render?: () => React.ReactNode //Full control the rendering,
gradientStart?: string // Top background gradient starting color
gradientEnd?: string // Top background gradient ending color
content: React.ReactNode
textColor:string //text color
className:string
style?:CSSProperties
}		-
onClickClick the callback of the avatar.(e: Event) => void-
onErrorImage load failed event, returning false closes the default fallback behavior of the component(e: Event) = > boolean-
onMouseEnterCallback to onMouseEnter event(e: Event) => void-
onMouseLeaveCallback to onMouseLeave event(e: Event) => void-

AvatarGroup

PropertiesInstructionstypeDefault
maxCountDisplay +N when the number of avatars exceeds this valuenumber-
overlapFromSet the coverage direction of the avatars, one of start, endstringstart
renderMoreCustomize the more tag(restNumber: number, restAvatars: ReactNode[]) => ReactNode-
shapeShape of the avatar, one of circle, squarestringcircle
sizeSize of the avatar, one of extra-extra-small, extra-small, small, default, medium, large, extra-largestringmedium

Accessibility

  • Avatars are generally not used for operations and do not need to be focused. But when the Avatar can be clicked (such as the avatar on the Semi official website), it needs to be focused and respond to the keyboard Enter event.
  • When Avatar is used in combination with other components, also check the accessibility guidelines for that component.
  • Avatar's alt attribute can be read by screen readers, when using the avatar component, please use the alt attribute to explain the content of the image.

Design Tokens