Avatar

Used to represent users or things, supporting the display of images, icons, or characters.

When to use

Used to represent users or things, supporting the display of images, icons, or characters.

Examples

Basic

Three sizes and two shapes are available.

Autoset Font Size

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

Avatar group display.

Responsive Size

Avatar size can be automatically adjusted based on the screen size.

Type

Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.

With Badge

Usually used for reminders and notifications.

maxCount includes overflow

Wrap Avatar.Group with HOC to add overflowInFinal prop. When enabled, max.count represents the total number of elements to display and reserves 1 slot for the overflow indicator.

API

Avatar and Avatar.Group are exported from @ceebee/ui/client.

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 \| 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`	`-`	—

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