Avatar
Avatar
Used to represent users or things, supporting the display of images, icons, or characters.
Importimport{ Avatar }from"antd"; |
Sourcecomponents/avatar |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport{ Avatar }from"antd"; |
Sourcecomponents/avatar |
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| alt | This attribute defines the alternative text describing the image | string | - | |
| gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 |
| icon | Custom icon type for an icon avatar | ReactNode | - | |
| shape | The shape of avatar | circle | square | circle | |
| size | The size of the avatar | number | large | small | default | { xs: number, sm: number, ...} | default | 4.7.0 |
| src | The address of the image for an image avatar or image element | string | ReactNode | - | ReactNode: 4.8.0 |
| srcSet | A list of sources to use for different screen resolutions | string | - | |
| draggable | Whether the picture is allowed to be dragged | boolean | 'true' | 'false' | true | |
| crossOrigin | CORS settings attributes | 'anonymous' | 'use-credentials' | '' | - | 4.17.0 |
| onError | Handler when img load error, return false to prevent default fallback behavior | () => boolean | - |
Tip: You can set
iconorchildrenas the fallback for image load error, with the priority oficon>children
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| max | Set maximum display related configurations, Before 5.18.0 you can use parameters | { count?: number; style?: CSSProperties; popover?: PopoverProps } | - | 5.18.0 |
| size | The size of the avatar | number | large | small | default | { xs: number, sm: number, ...} | default | 4.8.0 |
| shape | The shape of the avatar | circle | square | circle | 5.8.0 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| containerSize | Size of Avatar | number | 32 |
| containerSizeLG | Size of large Avatar | number | 40 |
| containerSizeSM | Size of small Avatar | number | 24 |
| groupBorderColor | Border color of avatars in a group | string | #ffffff |
| groupOverlapping | Overlapping of avatars in a group | number | -8 |
| groupSpace | Spacing between avatars in a group | number | 4 |
| textFontSize | Font size of Avatar | number | 18 |
| textFontSizeLG | Font size of large Avatar | number | 24 |
| textFontSizeSM | Font size of small Avatar | number | 14 |
Three sizes and two shapes are available.
For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar. You can also use gap to set the unit distance between left and right sides.
Avatar group display.
Avatar size can be automatically adjusted based on the screen size.
Component Token Debug
Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.
Usually used for reminders and notifications.
Text inside Avatar should be set a proper font size when toggle it's visibility.
When the image does not exist, if src is a ReactElement, it will try to fall back to src, otherwise it will try to fall back to icon, and finally fall back to displaying children.
