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
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
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 thealt
attribute to explain the content of the image.