Avatar - Ant Design

Avatars can be used to represent people or objects. It supports images, Icons, or letters.

Examples

API

Common props ref：Common props

Avatar

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 icon or children as the fallback for image load error, with the priority of icon > children

Avatar.Group (4.5.0+)

Property	Description	Type	Default	Version
maxCount	Max avatars to show	number	-
maxPopoverPlacement	The placement of excess avatar Popover	`top` \| `bottom`	`top`
maxPopoverTrigger	Set the trigger of excess avatar Popover	`hover` \| `focus` \| `click`	`hover`	4.17.0
maxStyle	The style of excess avatar style	CSSProperties	-
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

Design Token

Component TokenHow to use?

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

Global TokenHow to use?