Components
    Basic · Button

    Button

    Users use buttons to trigger an operation or jump.

    Demos

    How to import

    import { Button, ButtonGroup, SplitButtonGroup } from '@fibrous/semi-ui-solid';

    Button Type

    Buttons support the following types:

    • Primary button ("primary", default)
    • Secondary button ("secondary")
    • Tertiary button ("tertiary")
    • Warning button ("warning")
    • Danger button ("danger")
    Code
    import { Button } from '@fibrous/semi-ui-solid';

export default function ButtonDemo() {
    return (
        <div class="btn-margin-right">
            <Button>主要按钮</Button>
            <Button type="secondary">次要按钮</Button>
            <Button type="tertiary">第三按钮</Button>
            <Button type="warning">警告按钮</Button>
            <Button type="danger">危险按钮</Button>
        </div>
    );
}

    About the Font Color

    CSS Variables are used with the button:

    • var(--semi-color-primary): main
    • var(--semi-color-secondary): secondary
    • var(--semi-color-tertiary): third
    • var(--semi-color-warning): warning
    • var(--semi-color-danger): danger

    You can define your elements directly using these theme colors.

    主要次要第三警告危险
    Code
    import { For } from 'solid-js';

const types = [
    ['primary', '主要'],
    ['secondary', '次要'],
    ['tertiary', '第三'],
    ['warning', '警告'],
    ['danger', '危险'],
] as const;

export default function ButtonDemo() {
    return (
        <article>
            <For each={types}>{([type, label]) => <strong style={{ color: `var(--semi-color-${type})`, 'margin-right': '10px' }}>{label}</strong>}</For>
        </article>
    );
}

    Button Theme

    The themes currently available are:

    • light: light background
    • solid: dark background
    • borderless: no background
    • outline: border mode

    The default theme is light

    Light Background

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

export default function ButtonDemo() {
    return (
        <>
            <Button theme="light" type="primary" style={{ 'margin-right': '8px' }}>
                浅色主要
            </Button>
            <Button theme="light" type="secondary" style={{ 'margin-right': '8px' }}>
                浅色次要
            </Button>
            <Button theme="light" type="tertiary" style={{ 'margin-right': '8px' }}>
                浅色第三
            </Button>
            <Button theme="light" type="warning" style={{ 'margin-right': '8px' }}>
                浅色警告
            </Button>
            <Button theme="light" type="danger" style={{ 'margin-right': '8px' }}>
                浅色危险
            </Button>
        </>
    );
}

    Dark Background

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

export default function ButtonDemo() {
    return (
        <>
            <Button theme="solid" type="primary" style={{ 'margin-right': '8px' }}>
                深色主要
            </Button>
            <Button theme="solid" type="secondary" style={{ 'margin-right': '8px' }}>
                深色次要
            </Button>
            <Button theme="solid" type="tertiary" style={{ 'margin-right': '8px' }}>
                深色第三
            </Button>
            <Button theme="solid" type="warning" style={{ 'margin-right': '8px' }}>
                深色警告
            </Button>
            <Button theme="solid" type="danger" style={{ 'margin-right': '8px' }}>
                深色危险
            </Button>
        </>
    );
}

    No Background

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

export default function ButtonDemo() {
    return (
        <>
            <Button theme="borderless" type="primary" style={{ 'margin-right': '8px' }}>
                主要
            </Button>
            <Button theme="borderless" type="secondary" style={{ 'margin-right': '8px' }}>
                次要
            </Button>
            <Button theme="borderless" type="tertiary" style={{ 'margin-right': '8px' }}>
                第三
            </Button>
            <Button theme="borderless" type="warning" style={{ 'margin-right': '8px' }}>
                警告
            </Button>
            <Button theme="borderless" type="danger" style={{ 'margin-right': '8px' }}>
                危险
            </Button>
        </>
    );
}

    Border Mode

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

export default function ButtonDemo() {
    return (
        <>
            <Button theme="outline" type="primary" style={{ 'margin-right': '8px' }}>
                主要
            </Button>
            <Button theme="outline" type="secondary" style={{ 'margin-right': '8px' }}>
                次要
            </Button>
            <Button theme="outline" type="tertiary" style={{ 'margin-right': '8px' }}>
                第三
            </Button>
            <Button theme="outline" type="warning" style={{ 'margin-right': '8px' }}>
                警告
            </Button>
            <Button theme="outline" type="danger" style={{ 'margin-right': '8px' }}>
                危险
            </Button>
        </>
    );
}

    Size

    Three sizes are defined by default:

    • Big: "Large"
    • Default: "default."
    • Small: "Small"
    Code
    import { Button } from '@fibrous/semi-ui-solid';

export default function ButtonDemo() {
    return (
        <div>
            <Button size="large" style={{ 'margin-right': '8px' }}>
                大尺寸
            </Button>
            <Button size="default" style={{ 'margin-right': '8px' }}>
                默认尺寸
            </Button>
            <Button size="small">小尺寸</Button>
        </div>
    );
}

    Block Button

    The block button has a predefined width, and its width is independent of the width of the contents of the button.

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

export default function ButtonDemo() {
    return (
        <div>
            <Button block>块级按钮</Button>
        </div>
    );
}

    Icon Button

    An icon that defines a button.

    默认状态：

    禁用状态：

    复合类型：

    更改主题：

    更改图标位置：

    Code
    import { IconCamera, IconChevronDown, IconSidebar } from '@fibrous/semi-icons-solid';
import { Button } from '@fibrous/semi-ui-solid';

export default function ButtonDemo() {
    return (
        <div>
            <strong>默认状态：</strong>
            <Button icon={<IconCamera />} aria-label="截屏" />
            <br />
            <br />
            <strong>禁用状态：</strong>
            <Button disabled icon={<IconCamera />} aria-label="截屏" />
            <br />
            <br />
            <strong>复合类型：</strong>
            <span class="btn-margin-right">
                <Button type="primary" icon={<IconCamera />} aria-label="截屏" />
                <Button type="secondary" icon={<IconCamera />} aria-label="截屏" />
                <Button type="warning" icon={<IconCamera />} aria-label="截屏" />
                <Button type="danger" icon={<IconCamera />} aria-label="截屏" />
            </span>
            <br />
            <br />
            <strong>更改主题：</strong>
            <Button icon={<IconCamera />} theme="solid" style={{ 'margin-right': '10px' }} aria-label="截屏" />
            <Button icon={<IconCamera />} theme="light" aria-label="截屏" />
            <br />
            <br />
            <strong>更改图标位置：</strong>
            <Button icon={<IconSidebar />} theme="solid" style={{ 'margin-right': '10px' }}>
                收起
            </Button>
            <Button icon={<IconChevronDown />} theme="solid" iconPosition="right">
                展开选项
            </Button>
            <br />
            <br />
        </div>
    );
}

    We recommend using Typography to achieve link text button. Refer to Typography for more information.

    Prohibited Status

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

export default function ButtonDemo() {
    return (
        <div>
            <Button disabled>禁用</Button>
            <Button disabled theme="borderless">
                无背景禁用
            </Button>
            <Button disabled theme="light">
                浅色禁用
            </Button>
            <Button disabled theme="borderless" type="primary">
                无背景主要禁用
            </Button>
            <Button disabled theme="solid" type="warning">
                深色警告禁用
            </Button>
        </div>
    );
}

    Loading State

    The button supports the Loading state, by setting the loading parameter value to true, note: the disabled state takes precedence over the loading state.

    Code
    import { createSignal } from 'solid-js';
import { IconDelete } from '@fibrous/semi-icons-solid';
import { Button } from '@fibrous/semi-ui-solid';

export default function ButtonDemo() {
    const [saveLoading, setSaveLoading] = createSignal(false);
    const [delLoading, setDelLoading] = createSignal(true);
    const [repLoading, setRepLoading] = createSignal(true);

    const reset = (status: boolean) => {
        setSaveLoading(status);
        setDelLoading(status);
        setRepLoading(status);
    };

    return (
        <div>
            <div>
                <div class="btn-margin-right" style={{ display: 'inline-flex', 'align-items': 'center', 'padding-bottom': '14px' }}>
                    <Button onClick={() => reset(false)}>关闭加载态</Button>
                    <Button onClick={() => reset(true)}>开启加载态</Button>
                </div>
            </div>
            <hr />
            <Button loading={saveLoading()} onClick={() => setSaveLoading(true)} style={{ 'margin-right': '14px' }}>
                保存
            </Button>
            <Button loading={delLoading()} icon={<IconDelete />} type="danger" onClick={() => setDelLoading(true)} style={{ 'margin-right': '14px' }}>
                删除
            </Button>
            <div style={{ width: '200px', display: 'inline-block' }}>
                <Button loading={repLoading()} type="warning" block theme="solid" onClick={() => setRepLoading(true)}>
                    撤销
                </Button>
            </div>
        </div>
    );
}

    AI style - Colorful buttons

    Set colorful to get colorful buttons. Colorful buttons support all theme, and type only supports primary and tertiary.

    The gradient fill only reaches an icon passed as a component (icon={IconAIFilledLevel1}); an element (icon={<IconAIFilledLevel1 />}) is already rendered, so the button cannot fill it.

    Code
    import { For } from 'solid-js';
import { IconAIFilledLevel1, IconAIFilledLevel2, IconAIFilledLevel3 } from '@fibrous/semi-icons-solid';
import { Button } from '@fibrous/semi-ui-solid';

// Icons are passed as components: only a component receives the colorful fill
const rows = [
    { theme: 'solid', primaryIcon: IconAIFilledLevel1, tertiaryIcon: IconAIFilledLevel3 },
    { theme: 'light', primaryIcon: IconAIFilledLevel3, tertiaryIcon: IconAIFilledLevel2 },
    { theme: 'outline', primaryIcon: IconAIFilledLevel1, tertiaryIcon: IconAIFilledLevel2 },
    { theme: 'borderless', primaryIcon: IconAIFilledLevel3, tertiaryIcon: IconAIFilledLevel2 },
] as const;

export default function ButtonDemo() {
    return (
        <For each={['Colorful', undefined]}>
            {(content) => (
                <div style={{ display: 'flex', 'row-gap': '16px', 'margin-top': '20px', 'margin-left': '10px', 'flex-direction': 'column' }}>
                    <For each={rows}>
                        {(row) => (
                            <div style={{ display: 'flex', 'column-gap': '16px' }}>
                                <For each={[{ type: 'primary', icon: row.primaryIcon } as const, { type: 'tertiary', icon: row.tertiaryIcon } as const]}>
                                    {(item) => (
                                        <>
                                            <Button colorful aria-label={content ? undefined : 'AI'} theme={row.theme} type={item.type} icon={item.icon}>
                                                {content}
                                            </Button>
                                            <Button colorful aria-label={content ? undefined : 'AI'} theme={row.theme} type={item.type} loading>
                                                {content}
                                            </Button>
                                            <Button colorful aria-label={content ? undefined : 'AI'} theme={row.theme} type={item.type} icon={item.icon} disabled>
                                                {content}
                                            </Button>
                                        </>
                                    )}
                                </For>
                            </div>
                        )}
                    </For>
                </div>
            )}
        </For>
    );
}

    Button Combination

    You can put multiple buttons in a ButtonGroup container and set size, disabled, type, theme and colorful on it to give the buttons a shared size, disabled state, type, theme and colorful style. These props are only defaults: a value set on a button itself wins. Other props such as data-*, id, aria-* and event handlers go to the group's root element (role="group").

    Combined Dimensions

    Code
    import { For } from 'solid-js';
import { Button, ButtonGroup } from '@fibrous/semi-ui-solid';

const sizes = ['large', 'default', 'small'] as const;

export default function ButtonDemo() {
    return (
        <div style={{ display: 'flex' }}>
            <For each={sizes}>
                {(size) => (
                    <div style={{ 'margin-right': '10px' }}>
                        <ButtonGroup size={size} aria-label="操作按钮组">
                            <Button>拷贝</Button>
                            <Button>查询</Button>
                            <Button>剪切</Button>
                        </ButtonGroup>
                    </div>
                )}
            </For>
        </div>
    );
}

    Combined Disabled

    Code
    import { Button, ButtonGroup } from '@fibrous/semi-ui-solid';

export default function ButtonDemo() {
    return (
        <div style={{ display: 'flex' }}>
            <div style={{ 'margin-right': '10px' }}>
                <ButtonGroup disabled>
                    <Button>拷贝</Button>
                    <Button>查询</Button>
                    <Button>剪切</Button>
                </ButtonGroup>
            </div>
        </div>
    );
}

    Combined Type

    Code
    import { For } from 'solid-js';
import { Button, ButtonGroup } from '@fibrous/semi-ui-solid';

const types = ['primary', 'secondary', 'tertiary', 'warning', 'danger'] as const;

export default function ButtonDemo() {
    return (
        <div style={{ display: 'flex' }}>
            <For each={types}>
                {(type) => (
                    <div style={{ 'margin-right': '10px' }}>
                        <ButtonGroup type={type} aria-label="操作按钮组">
                            <Button>拷贝</Button>
                            <Button>查询</Button>
                            <Button>剪切</Button>
                        </ButtonGroup>
                    </div>
                )}
            </For>
        </div>
    );
}

    Split Button Group

    In the scene where Button and Dropdown are combined, split buttons can be used. The split buttons add the space between the buttons and change the rounded corners of the buttons.

    Basic Usage

    Code
    import { createSignal } from 'solid-js';
import { IconTreeTriangleDown } from '@fibrous/semi-icons-solid';
import { Button, Dropdown, SplitButtonGroup, type DropDownMenuItem } from '@fibrous/semi-ui-solid';

const menu: DropDownMenuItem[] = [
    { node: 'item', name: '编辑项目', onClick: () => console.log('编辑项目点击') },
    { node: 'item', name: '重置项目' },
    { node: 'divider' },
    { node: 'item', name: '复制项目' },
    { node: 'item', name: '从项目创建模版' },
    { node: 'divider' },
    { node: 'item', name: '删除项目', type: 'danger' },
];

export default function ButtonDemo() {
    const [btnVisible, setBtnVisible] = createSignal<Record<number, boolean>>({ 1: false, 2: false, 3: false });

    const handleVisibleChange = (key: number, visible: boolean) => setBtnVisible((prev) => ({ ...prev, [key]: visible }));

    return (
        <div>
            <SplitButtonGroup style={{ 'margin-right': '10px' }} aria-label="项目操作按钮组">
                <Button theme="solid" type="primary">
                    分裂按钮
                </Button>
                <Dropdown onVisibleChange={(v) => handleVisibleChange(1, v)} menu={menu} trigger="click" position="bottomRight">
                    {(trigger) => <Button {...trigger()} style={btnVisible()[1] ? { background: 'var(--semi-color-primary-hover)', padding: '8px 4px' } : { padding: '8px 4px' }} theme="solid" type="primary" aria-label="更多操作" icon={<IconTreeTriangleDown />} />}
                </Dropdown>
            </SplitButtonGroup>
            <SplitButtonGroup style={{ 'margin-right': '10px' }} aria-label="项目操作按钮组">
                <Button theme="light" type="primary">
                    分裂按钮
                </Button>
                <Dropdown onVisibleChange={(v) => handleVisibleChange(2, v)} menu={menu} trigger="click" position="bottomRight">
                    {(trigger) => <Button {...trigger()} style={btnVisible()[2] ? { background: 'var(--semi-color-fill-1)', padding: '8px 4px' } : { padding: '8px 4px' }} theme="light" type="primary" aria-label="更多操作" icon={<IconTreeTriangleDown />} />}
                </Dropdown>
            </SplitButtonGroup>
            <SplitButtonGroup aria-label="项目操作按钮组">
                <Button style={btnVisible()[3] ? { background: 'var(--semi-color-fill-0)' } : {}} theme="borderless" type="primary">
                    分裂按钮
                </Button>
                <Dropdown onVisibleChange={(v) => handleVisibleChange(3, v)} menu={menu} trigger="click" position="bottomRight">
                    {(trigger) => <Button {...trigger()} style={btnVisible()[3] ? { background: 'var(--semi-color-fill-1)', padding: '8px 4px' } : { padding: '8px 4px' }} theme="borderless" type="primary" aria-label="更多操作" icon={<IconTreeTriangleDown />} />}
                </Dropdown>
            </SplitButtonGroup>
        </div>
    );
}

    API Reference

    Button

    Props

    PropertyDescriptionTypeDefault
    blockRenders the button as a block-level button.booleanfalse
    colorfulColorful button, supported for the primary and tertiary types only. Falls back to the ButtonGroup it is in, and finally to false.boolean-
    contentClassNameClass name of the content area.string-
    disabledDisabled state, which takes precedence over loading. Falls back to the ButtonGroup it is in, and finally to false.boolean-
    htmlTypeNative type of the button: button, reset or submit.HtmlType"button"
    iconButton icon, an element or an icon component; only a component (such as icon={IconAIFilledLevel1}) receives the colorful fill.TypeJSX.Element | Component<{ fill?: IconFill }>-
    iconPositionIcon position: left or right.'left' | 'right'"left"
    loadingLoading state. A loading button stays focusable, its onClick is ignored, and a submit button does not submit its form.booleanfalse
    noHorizontalPaddingRemoves horizontal padding: true, left, right or an array of both. Applies only to a button that shows an icon or the loading spinner.boolean | HorizontalPaddingType | HorizontalPaddingType[]false
    sizeButton size: large, default or small. Falls back to the ButtonGroup it is in, and finally to default.Size-
    themeButton theme: solid, borderless, light or outline. Falls back to the ButtonGroup it is in, and finally to light.Theme-
    typeButton type: primary, secondary, tertiary, warning or danger. Falls back to the ButtonGroup it is in, and finally to primary.Type-

    class, style, ref and native attributes and events (such as id, aria-*, onClick and onMouseDown) land on the native <button>. onClick does not fire while loading.

    ButtonGroup

    Props

    PropertyDescriptionTypeDefault
    colorfulColorful style, used as the default of the buttons in the group.boolean-
    disabledDisabled state, used as the default of the buttons in the group.boolean-
    sizeButton size, used as the default of the buttons in the group.Size-
    themeButton theme, used as the default of the buttons in the group.Theme-
    typeButton type, used as the default of the buttons in the group.Type-

    class, style, ref and native attributes (such as data-* and aria-*) land on the group's root element (role="group").

    SplitButtonGroup

    Props

    PropertyDescriptionTypeDefault
    None

    class, style, ref and native attributes (such as aria-*) land on the split button group's root element (role="group").

    Accessibility

    ARIA

    • aria-label is used to indicate the function of the button. For icon buttons, we recommend using this attribute
    • aria-disabled is true when the button is disabled or loading, indicating that the button cannot be operated

    Keyboard and Focus

    • Button's focus management is consistent with native button, keyboard users can use Tab and Shift + Tab to switch focus
    • The trigger of Button is the same as the native button, when the button is focused, it can be activated by Enter or Space key
    • The buttons in the ButtonGroup are managed in the same way as the focus of a single button, and can be switched by Tab and Shift + Tab

    Content Guidelines

    • Buttons need to be clear and predictable, users should be able to predict what will happen when they click the button
    • Buttons should always start with a strong verb that encourages action
    • To give the user enough context, use {verb}+{noun} content formulas on buttons; in addition to common actions like "Done", "Close", "Cancel" or "OK"
    ✅ Recommended usage❌ Deprecated usage
    No permission to view this page
    No permission to view this page
    • When the button is combined with other components, the button can only display {verb}, such as "Add", "Create", if the other components (such as Modal and Sidesheet) already provide enough context for the information
    ✅ Recommended usage❌ Deprecated usage
    • Always write in Sentence case
    ✅ Recommended usage❌ Deprecated usage
    Create projectCreate
    Create a project
    Edit profileEdit

    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
    $transition_duration-button_primary-bgvar(--semi-transition_duration-none)主要按钮-背景色-动画持续时间
    $transition_function-button_primary-bgvar(--semi-transition_function-easeIn)主要按钮-背景色-过渡曲线
    $transition_delay-button_primary-bgvar(--semi-transition_delay-none)主要按钮-背景色-延迟时间
    $transition_duration-button_secondary-bgvar(--semi-transition_duration-none)次要按钮-背景色-动画持续时间
    $transition_function-button_secondary-bgvar(--semi-transition_function-easeIn)次要按钮-背景色-过渡曲线
    $transition_delay-button_secondary-bgvar(--semi-transition_delay-none)次要按钮-背景色-延迟时间
    $transition_duration-button_tertiary-bgvar(--semi-transition_duration-none)三级按钮-背景色-动画持续时间
    $transition_function-button_tertiary-bgvar(--semi-transition_function-easeIn)三级按钮-背景色-过渡曲线
    $transition_delay-button_tertiary-bgvar(--semi-transition_delay-none)三级按钮-背景色-延迟时间
    $transition_duration-button_light-bgvar(--semi-transition_duration-none)浅色按钮-背景色-动画持续时间
    $transition_function-button_light-bgvar(--semi-transition_function-easeIn)浅色按钮-背景色-过渡曲线
    $transition_delay-button_light-bgvar(--semi-transition_delay-none)浅色按钮-背景色-延迟时间
    $transition_duration-button_warning-bgvar(--semi-transition_duration-none)警告按钮-背景色-动画持续时间
    $transition_function-button_warning-bgvar(--semi-transition_function-easeIn)警告按钮-背景色-过渡曲线
    $transition_delay-button_warning-bgvar(--semi-transition_delay-none)警告按钮-背景色-延迟时间
    $transition_duration-button_danger-bgvar(--semi-transition_duration-none)危险按钮-背景色-动画持续时间
    $transition_function-button_danger-bgvar(--semi-transition_function-easeIn)危险按钮-背景色-过渡曲线
    $transition_delay-button_danger-bgvar(--semi-transition_delay-none)危险按钮-背景色-延迟时间
    $transition_duration-button_borderless-bgvar(--semi-transition_duration-none)无边框按钮-背景色-动画持续时间
    $transition_function-button_borderless-bgvar(--semi-transition_function-easeIn)无边框按钮-背景色-过渡曲线
    $transition_delay-button_borderless-bgvar(--semi-transition_delay-none)无边框按钮-背景色-延迟时间
    $transition_duration-button_primary-bordervar(--semi-transition_duration-none)主要按钮-边框-动画持续时间
    $transition_function-button_primary-bordervar(--semi-transition_function-easeIn)主要按钮-边框-过渡曲线
    $transition_delay-button_primary-bordervar(--semi-transition_delay-none)主要按钮-边框-延迟时间
    $transition_duration-button_secondary-bordervar(--semi-transition_duration-none)次要按钮-边框-动画持续时间
    $transition_function-button_secondary-bordervar(--semi-transition_function-easeIn)次要按钮-边框-过渡曲线
    $transition_delay-button_secondary-bordervar(--semi-transition_delay-none)次要按钮-边框-延迟时间
    $transition_duration-button_tertiary-bordervar(--semi-transition_duration-none)三级按钮-边框-动画持续时间
    $transition_function-button_tertiary-bordervar(--semi-transition_function-easeIn)三级按钮-边框-过渡曲线
    $transition_delay-button_tertiary-bordervar(--semi-transition_delay-none)三级按钮-边框-延迟时间
    $transition_duration-button_light-bordervar(--semi-transition_duration-none)浅色按钮-边框-动画持续时间
    $transition_function-button_light-bordervar(--semi-transition_function-easeIn)浅色按钮-边框-过渡曲线
    $transition_delay-button_light-bordervar(--semi-transition_delay-none)浅色按钮-边框-延迟时间
    $transition_duration-button_warning-bordervar(--semi-transition_duration-none)警告按钮-边框-动画持续时间
    $transition_function-button_warning-bordervar(--semi-transition_function-easeIn)警告按钮-边框-过渡曲线
    $transition_delay-button_warning-bordervar(--semi-transition_delay-none)警告按钮-边框-延迟时间
    $transition_duration-button_danger-bordervar(--semi-transition_duration-none)危险按钮-边框-动画持续时间
    $transition_function-button_danger-bordervar(--semi-transition_function-easeIn)危险按钮-边框-过渡曲线
    $transition_delay-button_danger-bordervar(--semi-transition_delay-none)危险按钮-边框-延迟时间
    $transform_scale-button_primaryvar(--semi-transform_scale-none)主要按钮-放大
    $transform_scale-button_secondaryvar(--semi-transform_scale-none)次要按钮-放大
    $transform_scale-button_tertiaryvar(--semi-transform_scale-none)三级按钮-放大
    $transform_scale-button_lightvar(--semi-transform_scale-none)浅色按钮-放大
    $transform_scale-button_warningvar(--semi-transform_scale-none)警告按钮-放大
    $transform_scale-button_dangervar(--semi-transform_scale-none)危险按钮-放大
    $transform_scale-button_borderlessvar(--semi-transform_scale-none)无边框按钮-放大
    $animation_duration-button_icon_loading600ms加载图标容器旋转一周时长
    $color-button_primary-bg-defaultvar(--semi-color-primary)主要按钮背景颜色
    $color-button_primary-border-defaulttransparent主要按钮描边颜色
    $color-button_primary-text-defaultvar(--semi-white)主要按钮文字颜色 - solid 模式
    $color-button_primary-bg-hovervar(--semi-color-primary-hover)主要按钮背景颜色 - 悬浮
    $color-button_primary-bg-activevar(--semi-color-primary-active)主要按钮背景颜色 - 按下
    $color-button_primary_outline-focus$color-focus-ring主要按钮轮廓 - 聚焦
    $color-button_primary_outline-border-defaultvar(--semi-color-border)主要按钮边框颜色 - 边框模式
    $color-button_primary_borderless-text-defaultvar(--semi-color-primary)主要按钮文字颜色 - 浅色/边框/无边框模式
    $color-button_primary_solid_colorful-bg-defaultvar(--semi-color-ai-general)Colorful 主要按钮背景颜色 - solid 主题
    $color-button_primary_solid_colorful-bg-hovervar(--semi-color-ai-general-hover)Colorful 主要按钮背景颜色 - solid 主题 - 悬浮
    $color-button_primary_solid_colorful-bg-activevar(--semi-color-ai-general-active)Colorful 主要按钮背景颜色 - solid 主题 - 按下
    $color-button_primary_light_colorful-text-defaultvar(--semi-color-ai-general)Colorful 主要按钮文字填充色 - 浅色模式
    $color-button_primary_light_outline-text-defaultvar(--semi-color-ai-purple)Colorful 主要按钮文字颜色 - 边框模式
    $color-button_primary_light_outline-bordervar(--semi-color-ai-purple)Colorful 主要按钮边框颜色 - 边框模式
    $color-button_primary_light_borderless-text-defaultvar(--semi-color-ai-general)Colorful 主要按钮文字填充色 - 无边框模式
    $color-button_secondary-bg-defaultvar(--semi-color-secondary)次要按钮背景颜色
    $color-button_secondary-border-defaultvar(--semi-color-secondary)次要按钮描边颜色
    $color-button_secondary-text-defaultvar(--semi-white)次要按钮文字颜色 - solid 模式
    $color-button_secondary-bg-hovervar(--semi-color-secondary-hover)次要按钮背景颜色 - 悬浮
    $color-button_secondary-bg-activevar(--semi-color-secondary-active)次要按钮背景颜色 - 按下
    $color-button_secondary_outline-border-defaultvar(--semi-color-border)次要按钮边框颜色 - 边框模式
    $color-button_secondary_borderless-text-defaultvar(--semi-color-secondary)次要按钮文字颜色 - 浅色/边框/无边框模式
    $color-button_danger-bg-defaultvar(--semi-color-danger)危险按钮背景颜色
    $color-button_danger-text-defaultvar(--semi-white)危险按钮文字颜色 - solid 模式
    $color-button_danger-bg-hovervar(--semi-color-danger-hover)危险按钮背景颜色 - 悬浮
    $color-button_danger-bg-activevar(--semi-color-danger-active)危险按钮背景颜色 - 按下
    $color-button_danger-outline-focusvar(--semi-color-danger-light-active)危险按钮轮廓 - 聚焦
    $color-button_danger_outline-border-defaultvar(--semi-color-danger)危险按钮边框颜色 - 边框模式
    $color-button_danger_borderless-text-defaultvar(--semi-color-danger)危险按钮文字颜色 - 浅色/边框/无边框模式
    $color-button_warning-bg-defaultvar(--semi-color-warning)警告按钮背景颜色
    $color-button_warning-text-defaultvar(--semi-white)警告按钮文字颜色 - solid 模式
    $color-button_warning-bg-hovervar(--semi-color-warning-hover)警告按钮背景颜色 - 悬浮
    $color-button_warning-bg-activevar(--semi-color-warning-active)警告按钮背景颜色 - 按下
    $color-button_warning-outline-focusvar(--semi-color-warning-light-active)警告按钮轮廓 - 聚焦
    $color-button_warning_outline-border-defaultvar(--semi-color-warning)警告按钮边框颜色 - 边框模式
    $color-button_warning_borderless-text-defaultvar(--semi-color-warning)警告按钮文字颜色 - 浅色/边框/无边框模式
    $color-button_tertiary-bg-defaultvar(--semi-color-tertiary)第三按钮背景颜色
    $color-button_tertiary-text-defaultvar(--semi-white)第三按钮文字颜色 - solid 模式
    $color-button_tertiary_solid_colorful-bg-defaultvar(--semi-ai-general-0)colorful 第三按钮背景颜色
    $color-button_tertiary_solid_colorful-bg-hovervar(--semi-ai-general-1)colorful 第三按钮背景颜色 - 悬浮
    $color-button_tertiary_solid_colorful-bg-activevar(--semi-ai-general-2)colorful 第三按钮背景颜色 - 按下
    $color-button_tertiary_solid_colorful-text-defaultvar(--semi-color-ai-general)Colorful 第三按钮文字填充色 - solid 主题
    $color-button_tertiary-bg-hovervar(--semi-color-tertiary-hover)第三按钮背景颜色 - 悬浮
    $color-button_tertiary-bg-activevar(--semi-color-tertiary-active)第三按钮背景颜色 - 按下
    $color-button_tertiary_outline-border-defaultvar(--semi-color-border)第三按钮边框颜色 - 边框模式
    $color-button_tertiary_solid-text-defaultvar(--semi-color-text-1)第三按钮文字颜色 - 浅色/边框/无边框模式
    $color-button_disabled_solid-text-defaultvar(--semi-color-disabled-text)禁用按钮文字颜色 - solid 主题
    $color-button_disabled-text-defaultvar(--semi-color-disabled-text)禁用按钮文字颜色 - 浅色主题或无背景
    $color-button_disabled_outline_text-defaultvar(--semi-color-disabled-text)禁用按钮文字颜色 - 边框模式
    $color-button_disabled-bg-defaultvar(--semi-color-disabled-bg)禁用按钮背景颜色
    $color-button_disabled-text-hover$color-button_disabled-text-default禁用按钮文字颜色 - solid 主题 - 悬浮
    $color-button_disabled_primary-bg-default$color-button_disabled-bg-default禁用 primary 按钮背景颜色
    $color-button_disabled_secondary-bg-default$color-button_disabled-bg-default禁用 secondary 按钮背景颜色
    $color-button_disabled_danger-bg-default$color-button_disabled-bg-default禁用 danger 按钮背景颜色
    $color-button_disabled_warning-bg-default$color-button_disabled-bg-default禁用 warning 按钮背景颜色
    $color-button_disabled_tertiary-bg-default$color-button_disabled-bg-default禁用 tertiary 按钮背景颜色
    $color-button_disabled_outline-border-defaultvar(--semi-color-border)禁用按钮边框颜色 - 边框模式
    $color-button_light-bg-defaultvar(--semi-color-fill-0)浅色按钮背景颜色
    $color-button_light-bg-hovervar(--semi-color-fill-1)浅色按钮背景颜色 - 悬浮
    $color-button_light-bg-activevar(--semi-color-fill-2)浅色按钮背景颜色 - 按下
    $color-button_light-border-defaulttransparent浅色按钮描边颜色
    $color-button_light-border-hover$color-button_light-border-default浅色按钮描边颜色 - 悬浮
    $color-button_light-border-active$color-button_light-border-hover浅色按钮描边颜色 - 按下
    $width-button_light-border0浅色按钮描边宽度
    $color-button_disabled_light_primary-bg-default$color-button_light-bg-default禁用 light primary 按钮背景颜色
    $color-button_disabled_light_secondary-bg-default$color-button_light-bg-default禁用 light secondary 按钮背景颜色
    $color-button_disabled_light_danger-bg-default$color-button_light-bg-default禁用 light danger 按钮背景颜色
    $color-button_disabled_light_warning-bg-default$color-button_light-bg-default禁用 light warning 按钮背景颜色
    $color-button_disabled_light_tertiary-bg-default$color-button_light-bg-default禁用 light tertiary 按钮背景颜色
    $color-button_borderless-bg-hovervar(--semi-color-fill-0)无背景按钮背景颜色 - 悬浮
    $color-button_borderless-bg-activevar(--semi-color-fill-1)无背景按钮背景颜色 - 按下
    $color-button_borderless-border-defaulttransparent无背景按钮描边颜色
    $color-button_borderless-border-hover$color-button_borderless-border-default无背景按钮描边颜色 - 悬浮
    $color-button_borderless-border-active$color-button_borderless-border-hover无背景按钮描边颜色 - 按下
    $width-button_borderless-border0无背景按钮描边宽度
    $width-button_outline-border1px边框模式按钮边框宽度
    $color-button_outline-bg-hovervar(--semi-color-fill-0)边框模式按钮背景颜色 - 悬浮
    $color-button_outline-bg-activevar(--semi-color-fill-1)边框模式按钮背景颜色 - 按下
    $color-button_group-border-defaultvar(--semi-color-border)按钮组分割线颜色
    $width-button_group-border$border-thickness-control按钮组分割线宽度
    $spacing-button_default-paddingTop6px按钮顶部内边距 - 默认
    $spacing-button_default-paddingLeft$spacing-base-tight按钮左侧内边距 - 默认
    $spacing-button_default-paddingRight$spacing-base-tight按钮右侧内边距 - 默认
    $spacing-button_large-paddingTop10px按钮顶部内边距 - 大尺寸
    $spacing-button_large-paddingBottom10px按钮底部内边距 - 大尺寸
    $spacing-button_large-paddingLeft$spacing-base按钮左侧内边距 - 大尺寸
    $spacing-button_large-paddingRight$spacing-base按钮右侧内边距 - 大尺寸
    $spacing-button_small-paddingTop$spacing-super-tight按钮顶部内边距 - 小尺寸
    $spacing-button_small-paddingBottom$spacing-super-tight按钮底部内边距 - 小尺寸
    $spacing-button_small-paddingLeft$spacing-base-tight按钮左侧内边距 - 小尺寸
    $spacing-button_small-paddingRight$spacing-base-tight按钮右侧内边距 - 小尺寸
    $spacing-button_iconOnly_default-paddingLeft$spacing-tight图标按钮左侧内边距 - 默认
    $spacing-button_iconOnly_default-paddingRight$spacing-tight图标按钮右侧内边距 - 默认
    $spacing-button_iconOnly_default-paddingTop$spacing-tight图标按钮顶部内边距 - 默认
    $spacing-button_iconOnly_large-paddingLeft$spacing-base-tight图标按钮左侧内边距 - 大尺寸
    $spacing-button_iconOnly_large-paddingRight$spacing-base-tight图标按钮右侧内边距 - 大尺寸
    $spacing-button_iconOnly_large-paddingTop$spacing-base-tight图标按钮顶部内边距 - 大尺寸
    $spacing-button_iconOnly_large-paddingBottom$spacing-base-tight图标按钮底部内边距 - 大尺寸
    $spacing-button_iconOnly_small-paddingLeft$spacing-extra-tight图标按钮左侧内边距 - 小尺寸
    $spacing-button_iconOnly_small-paddingRight$spacing-extra-tight图标按钮右侧内边距 - 小尺寸
    $spacing-button_iconOnly_small-paddingTop$spacing-extra-tight图标按钮顶部内边距 - 小尺寸
    $spacing-button_iconOnly_small-paddingBottom$spacing-extra-tight图标按钮底部内边距 - 小尺寸
    $height-button_iconOnly_small$height-control-small图标按钮 height - 小尺寸
    $width-button_iconOnly_small$height-control-small图标按钮 width - 小尺寸
    $height-button_iconOnly_default$height-control-default图标按钮 height - 默认
    $width-button_iconOnly_default$height-control-default图标按钮 width - 默认
    $height-button_iconOnly_large$height-control-large图标按钮 height - 大尺寸
    $width-button_iconOnly_large$height-control-large图标按钮 width - 大尺寸
    $spacing-button_iconOnly_content-marginLeft$spacing-tight按钮左侧图标距离文字间距
    $spacing-button_iconOnly_content-marginRight$spacing-tight按钮右侧图标距离文字间距
    $font-button-fontWeight$font-weight-bold按钮文字字重 - 默认
    $font-button-fontSize$font-size-regular按钮文字字号- 默认
    $font-button-lineHeight20px按钮文字行高 - 默认
    $font-button_small-fontWeight$font-weight-bold按钮文字字重 - 小尺寸
    $font-button_small-fontSize$font-size-regular按钮文字字号- 小尺寸
    $font-button_small-lineHeight20px按钮文字行高 - 小尺寸
    $font-button_large-fontWeight$font-weight-bold默认按钮文字字重 - 大尺寸
    $font-button_large-fontSize$font-size-regular默认按钮文字字号 - 大尺寸
    $font-button_large-lineHeight20px默认按钮文字行高 - 大尺寸
    $height-button_large$height-control-large按钮高度 - 大尺寸
    $height-button_small$height-control-small按钮高度 - 小尺寸
    $height-button_default$height-control-default按钮高度 - 默认
    $height-button_group_line_default20px分割线高度 - 默认
    $width-button-border$border-thickness按钮描边宽度
    $radius-buttonvar(--semi-border-radius-small)按钮圆角大小
    $radius-button_group$radius-button按钮组圆角大小
    $width-button-outline$width-focus-ring按钮轮廓宽度
    $radius-button_splitButtonGroup_first_topLeftvar(--semi-border-radius-small)组合按钮(Split) - 首个按钮左上圆角
    $radius-button_splitButtonGroup_first_bottomLeftvar(--semi-border-radius-small)组合按钮(Split) - 首个按钮左下圆角
    $radius-button_splitButtonGroup_last_topRightvar(--semi-border-radius-small)组合按钮(Split) - 末尾按钮右上圆角
    $radius-button_splitButtonGroup_last_bottomRightvar(--semi-border-radius-small)组合按钮(Split) - 末尾按钮右下圆角

    FAQ