Components
    Show · Avatar

    Avatar

    Avatar, used for image or text display.

    Demos

    How to import

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

    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-solid';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar size="extra-extra-small" style={{ margin: '4px' }} alt="用户">
                U
            </Avatar>
            <Avatar size="extra-small" style={{ margin: '4px' }} alt="用户">
                U
            </Avatar>
            <Avatar size="small" style={{ margin: '4px' }} alt="用户">
                U
            </Avatar>
            <Avatar size="default" style={{ margin: '4px' }} alt="用户">
                U
            </Avatar>
            <Avatar style={{ margin: '4px' }} alt="用户">
                U
            </Avatar>
            <Avatar size="large" style={{ margin: '4px' }} alt="用户">
                U
            </Avatar>
            <Avatar size="extra-large" style={{ margin: '4px' }} 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-solid';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar style={{ margin: '4px' }} alt="Alice Swift">
                AS
            </Avatar>
            <Avatar color="red" style={{ margin: '4px' }} alt="Bob Matteo">
                BM
            </Avatar>
            <Avatar color="light-blue" style={{ margin: '4px' }} alt="Taylor Joy">
                TJ
            </Avatar>
            <Avatar style={{ color: '#f56a00', 'background-color': '#fde3cf', margin: '4px' }} alt="Zank Lance">
                ZL
            </Avatar>
            <Avatar style={{ 'background-color': '#87d068', margin: '4px' }} 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-solid';

export default function AvatarDemo() {
    return (
        <div>
            <Avatar style={{ margin: '4px' }}>AS</Avatar>
            <Avatar style={{ margin: '4px' }} gap={4}>
                Semi
            </Avatar>
            <Avatar style={{ margin: '4px' }} 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-solid';

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

    Shape

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

    UU
    Code
    import { Avatar } from '@fibrous/semi-ui-solid';

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

    Event

    Avatars support onClick, onMouseEnter and onMouseLeave. You can use the hoverMask prop to pass in overlay content for hover state. The overlay has no default style.

    BD
    Code
    import { IconCamera } from '@fibrous/semi-icons-solid';
import { Avatar } from '@fibrous/semi-ui-solid';

const overlayStyle = {
    'background-color': 'var(--semi-color-overlay-bg)',
    height: '100%',
    width: '100%',
    display: 'flex',
    'align-items': 'center',
    'justify-content': 'center',
};

export default function AvatarDemo() {
    return (
        <Avatar
            hoverMask={
                <div style={overlayStyle}>
                    <IconCamera />
                </div>
            }
            color="red"
            alt="Bob Downton"
        >
            BD
        </Avatar>
    );
}

    Top and Bottom Slot

    Use the topSlot and bottomSlot props to configure badge appearance and text. A function as text renders custom content (such as an icon) and is called only when the badge shows. Pass a render function to replace the entire badge.

    beautiful cat
    直播
    Code
    import { IconPlus } from '@fibrous/semi-icons-solid';
import { Avatar } from '@fibrous/semi-ui-solid';

export default function AvatarDemo() {
    return (
        <Avatar
            alt="beautiful cat"
            src="/assets/placeholder/avatar-a.svg"
            style={{ margin: '4px' }}
            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

    T
    直播
    T
    直播
    T
    直播
    Code
    import { Avatar } from '@fibrous/semi-ui-solid';

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

    T
    直播中
    T
    直播中
    T
    直播中



    T
    T
    T
    Code
    import { IconPlus } from '@fibrous/semi-icons-solid';
import { Avatar } from '@fibrous/semi-ui-solid';

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

    T
    T
    T
    Code
    import { Avatar } from '@fibrous/semi-ui-solid';

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

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

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

    Additional Animation

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

    T
    T
    T
    Code
    import { Avatar } from '@fibrous/semi-ui-solid';

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

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

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

    AvatarGroup

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

    LLCXRMZLYZ
    Code
    import { Avatar, AvatarGroup } from '@fibrous/semi-ui-solid';

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', 'background-color': '#fde3cf' }} alt="Zank Lance">
                    ZL
                </Avatar>
                <Avatar style={{ 'background-color': '#87d068' }} alt="Youself Zhang">
                    YZ
                </Avatar>
            </AvatarGroup>
        </div>
    );
}

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

    LLCXRM+2
    Code
    import { Avatar, AvatarGroup } from '@fibrous/semi-ui-solid';

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', 'background-color': '#fde3cf' }} alt="Zank Lance">
                    ZL
                </Avatar>
                <Avatar style={{ 'background-color': '#87d068' }} alt="Youself Zhang">
                    YZ
                </Avatar>
            </AvatarGroup>
        </div>
    );
}

    You can customize the more tag with renderMore.

    LLCXRM+2
    Code
    import { For } from 'solid-js';
import { Avatar, AvatarGroup, Popover, type AvatarGroupProps } from '@fibrous/semi-ui-solid';

const renderMore: AvatarGroupProps['renderMore'] = (restNumber, restAvatars) => (
    <Popover
        content={
            <div>
                <For each={restAvatars}>
                    {(avatar) => (
                        <div style={{ 'padding-bottom': '12px' }}>
                            {avatar({ size: 'extra-small' })}
                            <span style={{ 'margin-left': '8px', 'font-size': '14px' }}>这是段文字描述</span>
                        </div>
                    )}
                </For>
            </div>
        }
        autoAdjustOverflow={false}
        position="bottomRight"
        style={{ padding: '12px 8px', 'padding-bottom': '0' }}
    >
        {(trigger) => <Avatar {...trigger()}>{`+${restNumber}`}</Avatar>}
    </Popover>
);

export default function AvatarDemo() {
    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', 'background-color': '#fde3cf' }} alt="Zank Lance">
                ZL
            </Avatar>
            <Avatar style={{ 'background-color': '#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
    LLCXRMZLYZ
    Code
    import { Avatar, AvatarGroup } from '@fibrous/semi-ui-solid';

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', 'background-color': '#fde3cf' }} alt="Zank Lance">
                        ZL
                    </Avatar>
                    <Avatar style={{ 'background-color': '#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', 'background-color': '#fde3cf' }} alt="Zank Lance">
                        ZL
                    </Avatar>
                    <Avatar style={{ 'background-color': '#87d068' }} alt="Youself Zhang">
                        YZ
                    </Avatar>
                </AvatarGroup>
            </div>
        </div>
    );
}

    API Reference

    Avatar

    Props

    PropertyDescriptionTypeDefault
    altAlternative text for the avatar image or text.string-
    borderAdditional border: true or { color, motion }; motion: true enables the border animation.{ color?: string; motion?: boolean; } | boolean-
    bottomSlotBottom badge configuration: shape, text, bgColor, textColor, class and style; text is text or a function returning custom content, called only when the badge shows; a render function replaces the whole badge.Type{ render?: () => JSX.Element; shape?: AvatarShape; text: AvatarSlotText; bgColor?: string; textColor?: string; class?: string; style?: JSX.CSSProperties | string; }-
    childrenText or custom content inside the avatar.JSX.Element-
    colorPreset background color of the avatar.AvatarColor"grey"
    contentMotionEnables animation in the avatar content area.boolean-
    gapSpace in pixels between the text and either side of the avatar.number3
    hoverMaskOverlay content shown on hover; the overlay has no default style.JSX.Element-
    imgAttrNative attributes applied to the inner img element.TypeElementProps<'img'>-
    onErrorCalled when the image fails to load, without an event argument. Returning false keeps the broken image instead of switching to the text fallback.Type() => boolean | void-
    shapeAvatar shape: circle or square.AvatarShape"circle"
    sizeAvatar size, as a preset name or a valid CSS size.string"medium"
    srcImage source URL.string-
    srcSetResponsive image sources.string-
    topSlotTop badge configuration: text, gradientStart, gradientEnd, textColor, class and style; text is text or a function returning custom content, called only when the badge shows; a render function replaces the whole badge.Type{ render?: () => JSX.Element; gradientStart?: string; gradientEnd?: string; text: AvatarSlotText; textColor?: string; class?: string; style?: JSX.CSSProperties | string; }-

    class, style, ref and native attributes are applied to the root element of the avatar. With border, topSlot or bottomSlot, the outer wrapper receives style, while class, ref and native attributes stay on the inner avatar element. A clickable avatar applies tabindex and aria-* to its single inner focus target.

    AvatarGroup

    Props

    PropertyDescriptionTypeDefault
    childrenAvatars in the group.JSX.Element-
    maxCountMaximum number of visible avatars; overflow is shown as +N.number-
    overlapFromAvatar overlap direction: start or end.AvatarGroupOverlapFrom"start"
    renderMoreCustom overflow label. It receives the remaining count and render functions for the hidden avatars, and its result replaces the default +N. A hidden avatar is created where its render function is called; the props passed override the avatar's own.Type(restNumber: number, restAvatars: ((props?: AvatarProps) => JSX.Element)[]) => JSX.Element-
    shapeShape of the avatars in the group.AvatarGroupShape"circle"
    sizeSize of the avatars in the group.string"medium"

    class, style, ref and native attributes, including aria-*, are applied to the group root element, 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 { Avatar } from '@fibrous/semi-ui-solid';

() => {
    return (
        <>
            {/* Good case */}
            <Avatar alt="A cut cat" src="/assets/placeholder/avatar-a.svg" style={{ margin: '4px' }} />
            <Avatar alt="Jiang Pengzhi" src="/assets/placeholder/avatar-a.svg" style={{ margin: '4px' }} />
            {/* Bad case: empty content */}
            <Avatar alt="" src="/assets/placeholder/avatar-a.svg" style={{ margin: '4px' }} />
            {/* 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: '4px' }} />
        </>
    );
};

    Describe the avatar content with alternative text. Avoid empty text and redundant words such as "picture". Declare an action with onClick; the component supplies a Tab stop and activates the click on Enter and Space.

    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 variableValueUsage
    $animation_duration-additionalBorder800ms边框动画持续时间
    $animation_duration-content1000ms内容动画持续时间
    $animation_opacity-additionalBorder-start1边框动画起始透明度
    $animation_opacity-additionalBorder-end0边框动画结束透明度
    $animation_scale-additionalBorder-start1边框动画起始缩放比例
    $animation_scale-additionalBorder-end1.15边框动画结束缩放比例
    $animation_scale-content-start1边框动画起始缩放比例
    $animation_scale-content-middle0.9边框动画中间态缩放比例
    $z-avatar-default100头像 z-index
    $color-avatar_default-border-defaultvar(--semi-color-bg-1)头像描边颜色
    $color-avatar_more_default-bg-defaultvar(--semi-grey-5)「更多」描边颜色
    $color-avatar-outline-focus$color-focus-ring头像聚焦轮廓颜色
    $width-avatar_extra_extra_small20px头像尺寸 - 极小
    $font-avatar_extra_extra_small-size10px文本字号 - 极小
    $font-avatar_extra_extra_small-lineHeight15px文本行高 - 极小
    $width-avatar_extra_small24px头像尺寸 - 超小
    $font-avatar_extra_small-size10px文本字号 - 超小
    $font-avatar_extra_small-lineHeight15px文本行高 - 超小
    $width-avatar_small32px头像尺寸 - 小
    $width-avatar_default40px头像尺寸 - 默认
    $width-avatar_medium48px头像尺寸 - 中
    $width-avatar_large72px头像尺寸 - 大
    $width-avatar_extra_large128px头像尺寸 - 超大
    $font-avatar_extra_large-size64px文本字号 - 超大
    $font-avatar_extra_large-lineHeight77px文本行高 - 超大
    $radius-avatarvar(--semi-border-radius-circle)头像圆角
    $width-avatar_extra_large-border3px头像组头像描边尺寸 - 超大
    $spacing-avatar_extra_large-marginLeft-32px头像组头像左侧外边距 - 超大
    $width-avatar_large-border3px头像组头像描边尺寸 - 大
    $spacing-avatar_large-marginLeft-18px头像左侧外边距 - 大
    $width-avatar_medium-border2px头像组头像描边尺寸 - 中
    $spacing-avatar_medium-marginLeft-12px头像左侧外边距 - 中
    $width-avatar_default-border2px头像组头像描边尺寸 - 默认
    $spacing-avatar_default-marginLeft-12px头像左侧外边距 - 默认
    $width-avatar_small-border2px头像组头像描边尺寸 - 小
    $spacing-avatar_small-marginLeft-12px头像左侧外边距 - 小
    $width-avatar_extra_small-border1px头像组头像描边尺寸 - 超小
    $spacing-avatar_extra_small-marginLeft-10px头像左侧外边距 - 超小
    $width-avatar_extra_extra_small-border1px头像组头像描边尺寸 - 极小
    $spacing-avatar_extra_extra_small-marginLeft-4px头像左侧外边距 - 极小
    $width-avatar-outline$width-focus-ring头像聚焦轮廓宽度
    $width-avatar_additional-border1.5px额外描边尺寸
    $color-avatar_additional-bordervar(--semi-color-primary)额外描边颜色
    $spacing-avatar_additional-borderGap2px额外描边与内侧间距
    $width-avatar-bottom_slot_circle_extra_small12pxextra small 头像底部 slot 圆形半径
    $width-avatar-bottom_slot_circle_small12pxsmall 头像底部 slot 圆形半径
    $width-avatar-bottom_slot_circle_default16pxdefault 头像底部 slot 圆形半径
    $width-avatar-bottom_slot_circle_medium18pxmedium 头像底部 slot 圆形半径
    $width-avatar-bottom_slot_circle_large28pxlarge 头像底部 slot 圆形半径
    $width-avatar-bottom_slot_circle_extra_large28pxextra large 头像底部 slot 圆形半径
    $color-avatar-bottom_slot_bgvar(--semi-color-primary)头像底部 slot 背景色
    $radius-avatar-bottom_slot_square4px底部 slot square 圆角
    $font-avatar_bottom_slot-extra_small-fontSize5pxextra small 底部 slot 文字大小
    $font-avatar_bottom_slot-small-fontSize5pxsmall 底部 slot 文字大小
    $font-avatar_bottom_slot-default-fontSize12pxdefault 底部 slot 文字大小
    $font-avatar_bottom_slot-medium-fontSize12pxmedium 底部 slot 文字大小
    $font-avatar_bottom_slot-large-fontSize12pxlarge 底部 slot 文字大小
    $font-avatar_bottom_slot-extra_large-fontSize14pxextra large 底部 slot 文字大小
    $spacing-avatar-bottom_slot_square-paddingX4px底部 slot square 形状左边距
    $spacing-avatar-bottom_slot_square-paddingY1px底部 slot square 形状右边距
    $font-avatar_top_slot-small-fontSize5pxsmall 顶部 slot 文字大小
    $font-avatar_top_slot-default-fontSize6pxdefault 顶部 slot 文字大小
    $font-avatar_top_slot-medium-fontSize8pxmedium 顶部 slot 文字大小
    $font-avatar_top_slot-large-fontSize14pxlarge 顶部 slot 文字大小
    $font-avatar_top_slot-extra_large-fontSize16pxextra large 顶部 slot 文字大小
    $spacing-avatar-top_slot_small-content-marginTop0pxsmall 顶部文字 marginTop
    $spacing-avatar-top_slot_default-content-marginTop-2pxdefault 顶部文字 marginTop
    $spacing-avatar-top_slot_medium-content-marginTop0pxmedium 顶部文字 marginTop
    $spacing-avatar-top_slot_large-content-marginTop0pxlarge 顶部文字 marginTop
    $spacing-avatar-top_slot_extra_large-content-marginTop0pxextra large 顶部文字 marginTop
    $color-avatar-bottom_slot_square-bordervar(--semi-color-bg-0)底部 square 边框颜色
    $width-avatar-bottom_slot_square_extra_small-border2pxsmall 头像底部 square 边框宽度
    $width-avatar-bottom_slot_square_small-border2pxsmall 头像底部 square 边框宽度
    $width-avatar-bottom_slot_square_default-border2pxdefault 头像底部 square 边框宽度
    $width-avatar-bottom_slot_square_medium-border2pxmedium 头像底部 square 边框宽度
    $width-avatar-bottom_slot_square_large-border2pxlarge 头像底部 square 边框宽度
    $width-avatar-bottom_slot_square_extra_large-border2pxextra large 头像底部 square 边框宽度
    $color-avatar-top_slot_textvar(--semi-color-bg-0)顶部 Slot 文字颜色
    $spacing-avatar-top_slot_small-shift-28pxsmall 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
    $spacing-avatar-top_slot_default-shift-32pxdefault 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
    $spacing-avatar-top_slot_medium-shift-30pxmedium 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
    $spacing-avatar-top_slot_large-shift-30pxlarge 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
    $spacing-avatar-top_slot_extra_large-shift-32pxextra large 顶部 slot 偏移量, 和 scale 一起控制 slot 的位置
    $spacing-avatar-top_slot_small-scale0.4small 顶部 slot 缩放比例
    $spacing-avatar-top_slot_default-scale0.7default 顶部 slot 缩放比例
    $spacing-avatar-top_slot_medium-scale0.8medium 顶部 slot 缩放比例
    $spacing-avatar-top_slot_large-scale1.1large 顶部 slot 缩放比例
    $spacing-avatar-top_slot_extra_large-scale1.4large 顶部 slot 缩放比例
    $radius-avatar_extra_extra_small3px极小尺寸头像的圆角
    $radius-avatar_extra_small3px超小尺寸头像的圆角
    $radius-avatar_small3px小尺寸头像的圆角
    $radius-avatar_default3px默认尺寸头像的圆角
    $radius-avatar_medium3px中尺寸头像的圆角
    $radius-avatar_large6px大尺寸头像的圆角
    $radius-avatar_extra_large12px超大尺寸头像的圆角