Avatar

Demos

How to import

import { Avatar, AvatarGroup } from '@fibrous/semi-ui-react';

Size

You can change the size of the avatars with size property. The following sizes are supported: extra-extra-small, extra-small,small, default, medium, large, extra-large.

UUUUUUU

Code

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar size="extra-extra-small" style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
            <Avatar size="extra-small" style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
            <Avatar size="small" style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
            <Avatar size="default" style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
            <Avatar style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
            <Avatar size="large" style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
            <Avatar size="extra-large" style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
        </div>
    );
}

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.

ASBMTJZLYZ

Code

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar style={{ margin: 4 }} alt="Alice Swift">
                AS
            </Avatar>
            <Avatar color="red" style={{ margin: 4 }} alt="Bob Matteo">
                BM
            </Avatar>
            <Avatar color="light-blue" style={{ margin: 4 }} alt="Taylor Joy">
                TJ
            </Avatar>
            <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf', margin: 4 }} alt="Zank Lance">
                ZL
            </Avatar>
            <Avatar style={{ backgroundColor: '#87d068', margin: 4 }} alt="Youself Zhang">
                YZ
            </Avatar>
        </div>
    );
}

Adaptive character size

For the avatar of the character type, the font size will be adjusted adaptively according to the width of the avatar. Use gap to adjust the pixel size on the left and right sides of the character avatar distance.

ASSemiSemi

Code

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar style={{ margin: 4 }}>AS</Avatar>
            <Avatar style={{ margin: 4 }} gap={4}>
                Semi
            </Avatar>
            <Avatar style={{ margin: 4 }} gap={10}>
                Semi
            </Avatar>
        </div>
    );
}

Image

Image avatars can be created by using the src or srcSet prop.

Code

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar alt="漂亮的猫咪" src="/assets/placeholder/avatar-a.svg" style={{ margin: 4 }} />
            <Avatar alt="可爱的猫咪" size="small" src="/assets/placeholder/avatar-a.svg" style={{ margin: 4 }} />
        </div>
    );
}

Shape

Avatars support two shapes: circle and square. The shape is default to circle.

Code

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
            <Avatar shape="square" style={{ margin: 4 }} alt="用户">
                U
            </Avatar>
        </div>
    );
}

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.

Code

import { IconCamera } from '@fibrous/semi-icons-react';
import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    const style = {
        backgroundColor: 'var(--semi-color-overlay-bg)',
        height: '100%',
        width: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    };
    const hover = (
        <div style={style}>
            <IconCamera />
        </div>
    );

    return (
        <Avatar hoverMask={hover} color="red" alt="Bob Downton">
            BD
        </Avatar>
    );
}

Top and Bottom Slot

直播

Code

import { IconPlus } from '@fibrous/semi-icons-react';
import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <Avatar
            alt="beautiful cat"
            src="/assets/placeholder/avatar-a.svg"
            style={{ margin: 4 }}
            size="large"
            border={{ color: '#FE2C55', motion: true }}
            contentMotion
            topSlot={{
                text: '直播',
                gradientStart: 'rgb(255,23,100)',
                gradientEnd: 'rgb(237,52,148)',
            }}
            bottomSlot={{
                shape: 'circle',
                bgColor: '#FE2C55',
                text: <IconPlus />,
            }}
        />
    );
}

Top

直播

Code

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar
                color="amber"
                topSlot={{
                    text: '直播',
                    gradientStart: 'rgb(255,23,100)',
                    gradientEnd: 'rgb(237,52,148)',
                }}
            >
                T
            </Avatar>

            <Avatar
                color="amber"
                size="large"
                topSlot={{
                    text: '直播',
                    gradientStart: 'rgb(255,23,100)',
                    gradientEnd: 'rgb(237,52,148)',
                }}
            >
                T
            </Avatar>

            <Avatar
                color="amber"
                size="extra-large"
                topSlot={{
                    text: '直播',
                    gradientStart: 'rgb(255,23,100)',
                    gradientEnd: 'rgb(237,52,148)',
                }}
            >
                T
            </Avatar>
        </div>
    );
}

Bottom

直播中

Code

import { IconPlus } from '@fibrous/semi-icons-react';
import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar
                color="amber"
                bottomSlot={{
                    shape: 'square',
                    bgColor: '#FE2C55',
                    text: '直播中',
                }}
            >
                T
            </Avatar>

            <Avatar
                color="amber"
                size="large"
                bottomSlot={{
                    shape: 'square',
                    bgColor: '#FE2C55',
                    text: '直播中',
                }}
            >
                T
            </Avatar>

            <Avatar
                color="amber"
                size="extra-large"
                bottomSlot={{
                    shape: 'square',
                    bgColor: '#FE2C55',
                    text: '直播中',
                }}
            >
                T
            </Avatar>
            <br />
            <br />
            <br />
            <Avatar
                color="amber"
                bottomSlot={{
                    shape: 'circle',
                    bgColor: '#FE2C55',
                    text: <IconPlus />,
                }}
            >
                T
            </Avatar>

            <Avatar
                color="amber"
                size="large"
                bottomSlot={{
                    shape: 'circle',
                    bgColor: '#FE2C55',
                    text: <IconPlus />,
                }}
            >
                T
            </Avatar>

            <Avatar
                color="amber"
                size="extra-large"
                bottomSlot={{
                    shape: 'circle',
                    bgColor: '#FE2C55',
                    text: <IconPlus />,
                }}
            >
                T
            </Avatar>
        </div>
    );
}

Additional border

Code

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar color="amber" border style={{ marginRight: '8px' }}>
                T
            </Avatar>

            <Avatar color="amber" border style={{ marginRight: '8px' }}>
                T
            </Avatar>

            <Avatar color="amber" border style={{ marginRight: '8px' }}>
                T
            </Avatar>
        </div>
    );
}

Additional Animation

Enable additional border and content animation through the motion field of border and the contentMotion prop.

Code

import { Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar color="amber" border={{ motion: true }} style={{ marginRight: '8px' }} contentMotion>
                T
            </Avatar>

            <Avatar color="amber" border={{ motion: true }} size="large" style={{ marginRight: '8px' }} contentMotion>
                T
            </Avatar>

            <Avatar color="amber" border={{ motion: true }} size="extra-large" style={{ marginRight: '8px' }} contentMotion>
                T
            </Avatar>
        </div>
    );
}

AvatarGroup

You can use AvatarGroup component to display avatars as a group.

LLCXRMZLYZ

Code

import { AvatarGroup, Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <AvatarGroup>
                <Avatar color="red" alt="Lisa LeBlanc">
                    LL
                </Avatar>
                <Avatar alt="Caroline Xiao">CX</Avatar>
                <Avatar color="amber" alt="Rafal Matin">
                    RM
                </Avatar>
                <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt="Zank Lance">
                    ZL
                </Avatar>
                <Avatar style={{ backgroundColor: '#87d068' }} alt="Youself Zhang">
                    YZ
                </Avatar>
            </AvatarGroup>
        </div>
    );
}

You can set the number of avatars to display with maxCount property.

LLCXRM+2

Code

import { AvatarGroup, Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <AvatarGroup maxCount={3}>
                <Avatar color="red" alt="Lisa LeBlanc">
                    LL
                </Avatar>
                <Avatar alt="Caroline Xiao">CX</Avatar>
                <Avatar color="amber" alt="Rafal Matin">
                    RM
                </Avatar>
                <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt="Zank Lance">
                    ZL
                </Avatar>
                <Avatar style={{ backgroundColor: '#87d068' }} alt="Youself Zhang">
                    YZ
                </Avatar>
            </AvatarGroup>
        </div>
    );
}

You can customize the more tag with renderMore.

LLCXRM+2

Code

import React, { type ReactNode } from 'react';
import { AvatarGroup, Avatar, Popover, type AvatarProps } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    const renderMore = (restNumber?: number, restAvatars: ReactNode[] = []) => {
        const content = restAvatars.map((avatar, index) => {
            return (
                <div style={{ paddingBottom: '12px' }} key={index}>
                    {React.isValidElement<AvatarProps>(avatar) && React.cloneElement(avatar, { size: 'extra-small' })}
                    <span style={{ marginLeft: 8, fontSize: 14 }}>这是段文字描述</span>
                </div>
            );
        });
        return (
            <Popover content={content} autoAdjustOverflow={false} position="bottomRight" style={{ padding: '12px 8px', paddingBottom: 0 }}>
                <Avatar>{`+${restNumber}`}</Avatar>
            </Popover>
        );
    };

    return (
        <AvatarGroup maxCount={3} renderMore={renderMore}>
            <Avatar color="red" alt="Lisa LeBlanc">
                LL
            </Avatar>
            <Avatar alt="Caroline Xiao">CX</Avatar>
            <Avatar color="amber" alt="Rafal Matin">
                RM
            </Avatar>
            <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt="Zank Lance">
                ZL
            </Avatar>
            <Avatar style={{ backgroundColor: '#87d068' }} alt="Youself Zhang">
                YZ
            </Avatar>
        </AvatarGroup>
    );
}

You can set the coverage direction of the avatars with overlapFrom. It has two optional values A and B. The default value is start.

LLCXRMZLYZ

Code

import { AvatarGroup, Avatar } from '@fibrous/semi-ui-react';

export default function AvatarDemo() {
    return (
        <div>
            <div>
                <AvatarGroup overlapFrom="start">
                    <Avatar color="red" alt="Lisa LeBlanc">
                        LL
                    </Avatar>
                    <Avatar alt="Caroline Xiao">CX</Avatar>
                    <Avatar color="amber" alt="Rafal Matin">
                        RM
                    </Avatar>
                    <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt="Zank Lance">
                        ZL
                    </Avatar>
                    <Avatar style={{ backgroundColor: '#87d068' }} alt="Youself Zhang">
                        YZ
                    </Avatar>
                </AvatarGroup>
            </div>
            <div>
                <AvatarGroup overlapFrom="end">
                    <Avatar color="red" alt="Lisa LeBlanc">
                        LL
                    </Avatar>
                    <Avatar alt="Caroline Xiao">CX</Avatar>
                    <Avatar color="amber" alt="Rafal Matin">
                        RM
                    </Avatar>
                    <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }} alt="Zank Lance">
                        ZL
                    </Avatar>
                    <Avatar style={{ backgroundColor: '#87d068' }} alt="Youself Zhang">
                        YZ
                    </Avatar>
                </AvatarGroup>
            </div>
        </div>
    );
}

API Reference

Props

Property	Description	Type	Default
alt	Alternative text of the image. On a text avatar it is the accessible name, falling back to the avatar text when unset.	`string`	-
border	Additional border: `true` or `{ color, motion }`; `motion: true` enables the border animation.	`{ color?: string; motion?: boolean; } \| boolean`	-
bottomSlot	Bottom badge configuration: `shape`, `text`, `bgColor`, `textColor`, `className` and `style`; a `render` function replaces the whole badge. Shown only at the preset sizes from `extra-small` to `extra-large`.	`Type`	-
children	Text or custom content inside the avatar.	`React.ReactNode`	-
className	Class name of the avatar element (`.semi-avatar`); when a border or a top or bottom badge is used, it sits inside the outer wrapper.	`string`	-
color	Preset background color: `amber`, `blue`, `cyan`, `green`, `grey`, `indigo`, `light-blue`, `light-green`, `lime`, `orange`, `pink`, `purple`, `red`, `teal`, `violet` or `yellow`; not used by image avatars.	`AvatarColor`	`"grey"`
contentMotion	Enables animation in the avatar content area.	`boolean`	-
gap	Space in pixels between the text and either side of the avatar.	`number`	`3`
hoverMask	Overlay content shown on hover; the overlay has no default style.	`React.ReactNode`	-
imgAttr	Native attributes applied to the inner `img` element, for image avatars only; its `onError` runs before the component's `onError`.	`Type`	-
onClick	Called when the avatar is clicked, with the React mouse event. Once set, the avatar can be focused, and `Enter` or Space triggers a click.	`React.MouseEventHandler`	-
onError	Called when the image fails to load, without an event argument. Returning `false` keeps the broken image instead of switching to the text fallback.	`React.MouseEventHandler`	-
onMouseEnter	Called when the pointer enters the avatar, with the React mouse event.	`React.MouseEventHandler`	-
onMouseLeave	Called when the pointer leaves the avatar, with the React mouse event.	`React.MouseEventHandler`	-
ref	Reference to the avatar element (`.semi-avatar`); when a border or a top or bottom badge is used, it is not the outer wrapper.	`Type`	-
shape	Avatar shape: `circle` or `square`.	`AvatarShape`	`"circle"`
size	Avatar size: `extra-extra-small`, `extra-small`, `small`, `default`, `medium`, `large` or `extra-large`, or a valid CSS size such as `10px`.	`string`	`"medium"`
src	Image source URL.	`string`	-
srcSet	Responsive image sources.	`string`	-
style	Avatar style; when a border or a top or bottom badge is used, the style goes to the outer wrapper.	`CSSProperties`	-
topSlot	Top badge configuration: `text`, `gradientStart`, `gradientEnd`, `textColor`, `className` and `style`; a `render` function replaces the whole badge. Shown only for circle avatars at the preset sizes from `extra-small` to `extra-large`; an unset gradient color uses `var(--semi-color-primary)`.	`Type`	-

Other native attributes (such as id and data-*) are applied to the avatar element (.semi-avatar); a clickable avatar applies tabIndex and aria-* to its single inner focus target. With border, topSlot or bottomSlot, style, onClick, onMouseEnter and onMouseLeave are applied to the outer wrapper instead.

AvatarGroup

Props

Property	Description	Type	Default
children	Avatars in the group.	`React.ReactNode`	-
maxCount	Maximum number of visible avatars; overflow is shown as a `+N` label.	`number`	-
overlapFrom	Avatar overlap direction, `start` or `end`: with `start` the left avatar covers the right one, with `end` the right avatar covers the left one.	`AvatarGroupOverlapFrom`	`"start"`
ref	Reference to the root element (`role="list"`).	`Type`	-
renderMore	Custom overflow label. It receives the remaining count and the hidden avatar nodes, and its result replaces the default `+N`.	`Type`	-
shape	Shape of the avatars in the group: `circle` or `square`.	`AvatarGroupShape`	`"circle"`
size	Size of the avatars in the group, with the same values as the Avatar `size`.	`string`	`"medium"`

Other props such as className, style, aria-* and data-* are applied to the root element of the group (role="list"), not to the avatars inside it.

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 and Space events.
A clickable Avatar with an image or text has a single Tab stop, the image or the text label. Its focus order and aria-* attributes, including those injected by Tooltip, are applied to that element.
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 the alt attribute to explain the content of the image.

import React from 'react';
import { Avatar } from '@fibrous/semi-ui-react';

() => {
    return (
        <>
            {/* Good case */}
            <Avatar alt="A cut cat" src="/assets/placeholder/avatar-a.svg" style={{ margin: 4 }} />
            <Avatar alt="Jiang Pengzhi" src="/assets/placeholder/avatar-a.svg" style={{ margin: 4 }} />
            {/* Bad case: empty content */}
            <Avatar alt="" src="/assets/placeholder/avatar-a.svg" style={{ margin: 4 }} />
            {/* Bad case: no need to include picture or image in alt */}
            <Avatar alt="Picture of Jiang Pengzhi" src="/assets/placeholder/avatar-a.svg" style={{ margin: 4 }} />
        </>
    );
};

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$animation_duration-additionalBorder	800ms	边框动画持续时间
$animation_duration-content	1000ms	内容动画持续时间
$animation_opacity-additionalBorder-start	1	边框动画起始透明度
$animation_opacity-additionalBorder-end	0	边框动画结束透明度
$animation_scale-additionalBorder-start	1	边框动画起始缩放比例
$animation_scale-additionalBorder-end	1.15	边框动画结束缩放比例
$animation_scale-content-start	1	边框动画起始缩放比例
$animation_scale-content-middle	0.9	边框动画中间态缩放比例
$z-avatar-default	100	头像 z-index
$color-avatar_default-border-default	var(--semi-color-bg-1)	头像描边颜色
$color-avatar_more_default-bg-default	var(--semi-grey-5)	「更多」描边颜色
$color-avatar-outline-focus	$color-focus-ring	头像聚焦轮廓颜色
$width-avatar_extra_extra_small	20px	头像尺寸 - 极小
$font-avatar_extra_extra_small-size	10px	文本字号 - 极小
$font-avatar_extra_extra_small-lineHeight	15px	文本行高 - 极小
$width-avatar_extra_small	24px	头像尺寸 - 超小
$font-avatar_extra_small-size	10px	文本字号 - 超小
$font-avatar_extra_small-lineHeight	15px	文本行高 - 超小
$width-avatar_small	32px	头像尺寸 - 小
$width-avatar_default	40px	头像尺寸 - 默认
$width-avatar_medium	48px	头像尺寸 - 中
$width-avatar_large	72px	头像尺寸 - 大
$width-avatar_extra_large	128px	头像尺寸 - 超大
$font-avatar_extra_large-size	64px	文本字号 - 超大
$font-avatar_extra_large-lineHeight	77px	文本行高 - 超大
$radius-avatar	var(--semi-border-radius-circle)	头像圆角
$width-avatar_extra_large-border	3px	头像组头像描边尺寸 - 超大
$spacing-avatar_extra_large-marginLeft	-32px	头像组头像左侧外边距 - 超大
$width-avatar_large-border	3px	头像组头像描边尺寸 - 大
$spacing-avatar_large-marginLeft	-18px	头像左侧外边距 - 大
$width-avatar_medium-border	2px	头像组头像描边尺寸 - 中
$spacing-avatar_medium-marginLeft	-12px	头像左侧外边距 - 中
$width-avatar_default-border	2px	头像组头像描边尺寸 - 默认
$spacing-avatar_default-marginLeft	-12px	头像左侧外边距 - 默认
$width-avatar_small-border	2px	头像组头像描边尺寸 - 小
$spacing-avatar_small-marginLeft	-12px	头像左侧外边距 - 小
$width-avatar_extra_small-border	1px	头像组头像描边尺寸 - 超小
$spacing-avatar_extra_small-marginLeft	-10px	头像左侧外边距 - 超小
$width-avatar_extra_extra_small-border	1px	头像组头像描边尺寸 - 极小
$spacing-avatar_extra_extra_small-marginLeft	-4px	头像左侧外边距 - 极小
$width-avatar-outline	$width-focus-ring	头像聚焦轮廓宽度
$width-avatar_additional-border	1.5px	额外描边尺寸
$color-avatar_additional-border	var(--semi-color-primary)	额外描边颜色
$spacing-avatar_additional-borderGap	2px	额外描边与内侧间距
$width-avatar-bottom_slot_circle_extra_small	12px	extra small 头像底部 slot 圆形半径
$width-avatar-bottom_slot_circle_small	12px	small 头像底部 slot 圆形半径
$width-avatar-bottom_slot_circle_default	16px	default 头像底部 slot 圆形半径
$width-avatar-bottom_slot_circle_medium	18px	medium 头像底部 slot 圆形半径
$width-avatar-bottom_slot_circle_large	28px	large 头像底部 slot 圆形半径
$width-avatar-bottom_slot_circle_extra_large	28px	extra large 头像底部 slot 圆形半径
$color-avatar-bottom_slot_bg	var(--semi-color-primary)	头像底部 slot 背景色
$radius-avatar-bottom_slot_square	4px	底部 slot square 圆角
$font-avatar_bottom_slot-extra_small-fontSize	5px	extra small 底部 slot 文字大小
$font-avatar_bottom_slot-small-fontSize	5px	small 底部 slot 文字大小
$font-avatar_bottom_slot-default-fontSize	12px	default 底部 slot 文字大小
$font-avatar_bottom_slot-medium-fontSize	12px	medium 底部 slot 文字大小
$font-avatar_bottom_slot-large-fontSize	12px	large 底部 slot 文字大小
$font-avatar_bottom_slot-extra_large-fontSize	14px	extra large 底部 slot 文字大小
$spacing-avatar-bottom_slot_square-paddingX	4px	底部 slot square 形状左边距
$spacing-avatar-bottom_slot_square-paddingY	1px	底部 slot square 形状右边距
$font-avatar_top_slot-small-fontSize	5px	small 顶部 slot 文字大小
$font-avatar_top_slot-default-fontSize	6px	default 顶部 slot 文字大小
$font-avatar_top_slot-medium-fontSize	8px	medium 顶部 slot 文字大小
$font-avatar_top_slot-large-fontSize	14px	large 顶部 slot 文字大小
$font-avatar_top_slot-extra_large-fontSize	16px	extra large 顶部 slot 文字大小
$spacing-avatar-top_slot_small-content-marginTop	0px	small 顶部文字 marginTop
$spacing-avatar-top_slot_default-content-marginTop	-2px	default 顶部文字 marginTop
$spacing-avatar-top_slot_medium-content-marginTop	0px	medium 顶部文字 marginTop
$spacing-avatar-top_slot_large-content-marginTop	0px	large 顶部文字 marginTop
$spacing-avatar-top_slot_extra_large-content-marginTop	0px	extra large 顶部文字 marginTop
$color-avatar-bottom_slot_square-border	var(--semi-color-bg-0)	底部 square 边框颜色
$width-avatar-bottom_slot_square_extra_small-border	2px	small 头像底部 square 边框宽度
$width-avatar-bottom_slot_square_small-border	2px	small 头像底部 square 边框宽度
$width-avatar-bottom_slot_square_default-border	2px	default 头像底部 square 边框宽度
$width-avatar-bottom_slot_square_medium-border	2px	medium 头像底部 square 边框宽度
$width-avatar-bottom_slot_square_large-border	2px	large 头像底部 square 边框宽度
$width-avatar-bottom_slot_square_extra_large-border	2px	extra large 头像底部 square 边框宽度
$color-avatar-top_slot_text	var(--semi-color-bg-0)	顶部 Slot 文字颜色
$spacing-avatar-top_slot_small-shift	-28px	small 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
$spacing-avatar-top_slot_default-shift	-32px	default 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
$spacing-avatar-top_slot_medium-shift	-30px	medium 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
$spacing-avatar-top_slot_large-shift	-30px	large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
$spacing-avatar-top_slot_extra_large-shift	-32px	extra large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
$spacing-avatar-top_slot_small-scale	0.4	small 顶部 slot 缩放比例
$spacing-avatar-top_slot_default-scale	0.7	default 顶部 slot 缩放比例
$spacing-avatar-top_slot_medium-scale	0.8	medium 顶部 slot 缩放比例
$spacing-avatar-top_slot_large-scale	1.1	large 顶部 slot 缩放比例
$spacing-avatar-top_slot_extra_large-scale	1.4	large 顶部 slot 缩放比例
$radius-avatar_extra_extra_small	3px	极小尺寸头像的圆角
$radius-avatar_extra_small	3px	超小尺寸头像的圆角
$radius-avatar_small	3px	小尺寸头像的圆角
$radius-avatar_default	3px	默认尺寸头像的圆角
$radius-avatar_medium	3px	中尺寸头像的圆角
$radius-avatar_large	6px	大尺寸头像的圆角
$radius-avatar_extra_large	12px	超大尺寸头像的圆角