Avatar

Examples

<code src="./demo/basic.tsx">Basic</code> <code src="./demo/type.tsx">Type</code> <code src="./demo/dynamic.tsx">Autoset Font Size</code> <code src="./demo/badge.tsx">With Badge</code> <code src="./demo/group.tsx">Avatar.Group</code> <code src="./demo/toggle-debug.tsx" debug>Calculate text style when hiding</code> <code src="./demo/responsive.tsx">Responsive Size</code> <code src="./demo/fallback.tsx" debug>Fallback</code> <code src="./demo/component-token.tsx" debug>Component Token</code>

API

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` \| `medium` \| `small` \| { xs: number, sm: number, ...}	`medium`	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 <Badge>4.5.0+</Badge>

Property	Description	Type	Default	Version
max	Set maximum display related configurations	`{ count?: number; style?: CSSProperties; popover?: PopoverProps }`	-	5.18.0
~~maxCount~~	Deprecated, please use `max={{ count: number }}`	number	-
~~maxPopoverPlacement~~	Deprecated, please use `max={{ popover: PopoverProps }}`	`top` \| `bottom`	`top`
~~maxPopoverTrigger~~	Deprecated, please use `max={{ popover: PopoverProps }}`	`hover` \| `focus` \| `click`	`hover`
~~maxStyle~~	Deprecated, please use `max={{ style: CSSProperties }}`	CSSProperties	-
size	The size of the avatar	number \| `large` \| `medium` \| `small` \| { xs: number, sm: number, ...}	`medium`	4.8.0
shape	The shape of the avatar	`circle` \| `square`	`circle`	5.8.0

Design Token