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
| Properties | Instructions | type | Default |
|---|---|---|---|
| alt | Defines an alternative text description of the image. | string | - |
| className | Class name | string | - |
| color | Color of the avatar, one of amber, blue, cyan, green, grey, indigo, light-blue, light-green, lime, orange, pink, rain, red, teal, violet, yellow, white | string | grey |
| hoverMask | Avatar content overlay when hover | ReactNode | - |
| imgAttr | Native html img attributes >=1.5.0 | React.ImgHTMLAttributes<HTMLImageElement> | - |
| shape | Shape of the avatar, one of circle, square | string | circle |
| size | Size of the avatar, one of extra-extra-small,extra-small, small, default, medium, large, extra-large | string | medium |
| src | Resource address for imgage avatars | string | - |
| srcSet | Set the image avatar responsive resource address | string | - |
| style | Style name | CSSProperties | - |
| onClick | Click the callback of the avatar. | (e: Event) => void | - |
| onError | Image load failed event, returning false closes the default fallback behavior of the component | (e: Event) = > boolean | - |
| onMouseEnter | Callback to onMouseEnter event | (e: Event) => void | - |
| onMouseLeave | Callback to onMouseLeave event | (e: Event) => void | - |
AvatarGroup
| Properties | Instructions | type | Default |
|---|---|---|---|
| maxCount | Display +N when the number of avatars exceeds this value | number | - |
| overlapFrom | Set the coverage direction of the avatars, one of start, end | string | start |
| renderMore | Customize the more tag | (restNumber: number, restAvatars: ReactNode[]) => ReactNode | - |
| shape | Shape of the avatar, one of circle, square | string | circle |
| size | Size of the avatar, one of extra-extra-small, extra-small, small, default, medium, large, extra-large | string | medium |
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
Enterevent. - When Avatar is used in combination with other components, also check the accessibility guidelines for that component.
- Avatar's
altattribute can be read by screen readers, when using the avatar component, please use thealtattribute to explain the content of the image.
