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.

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.

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-
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
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-
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