组件
    基础

    按钮

    用户使用按钮来触发一个操作或者进行跳转。

    代码演示

    如何引入

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

    按钮类型

    按钮支持以下类型：

    • 主按钮（"primary"，默认）
    • 次要按钮（"secondary"）
    • 第三按钮（"tertiary"）
    • 警告按钮（"warning"）
    • 危险按钮（"danger"）
    代码
    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>
    );
}

    关于类型字体色值

    按钮的字体色值使用的都是 CSS Variables，分别为：

    • var(--semi-color-primary)：主要
    • var(--semi-color-secondary)：次要
    • var(--semi-color-tertiary)：第三
    • var(--semi-color-warning)：警告
    • var(--semi-color-danger)：危险

    你可以直接使用这些主题色定义你的元素。

    主要次要第三警告危险
    代码
    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>
    );
}

    按钮主题

    目前可用的主题（theme）为：

    • light：浅色背景
    • solid：深色背景
    • borderless：无背景
    • outline: 边框模式

    默认的主题为 light

    浅色背景

    代码
    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>
        </>
    );
}

    深色背景

    代码
    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>
        </>
    );
}

    无背景

    代码
    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>
        </>
    );
}

    边框模式

    代码
    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>
        </>
    );
}

    尺寸

    默认定义了三种尺寸：

    • 大："large"
    • 默认："default"
    • 小："small"
    代码
    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>
    );
}

    块级按钮

    块级按钮具有预先定义好的宽度，它的宽度与按钮里面内容的宽度无关。

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

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

    图标按钮

    可定义按钮的图标。

    默认状态：

    禁用状态：

    复合类型：

    更改主题：

    更改图标位置：

    代码
    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>
    );
}

    链接按钮

    我们推荐使用 Typography 的 link 属性来实现链接型的文字按钮，具体用法详见Typography

    禁用状态

    代码
    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 参数值为 true 即可，注意：disabled 状态优先级高于 loading 状态。

    代码
    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 风格 - 多彩按钮

    设置 colorful 即可获得多彩按钮，多彩按钮支持所有的 theme ， type 仅支持 primary 及 tertiary。

    渐变填充只作用于以组件形式传入的图标（icon={IconAIFilledLevel1}）；传入元素（icon={<IconAIFilledLevel1 />}）时元素已经渲染，按钮无法再给它加填充。

    代码
    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>
    );
}

    按钮组合

    可以将多个按钮放入ButtonGroup的容器中，通过设置size，disabled，type，theme，colorful可统一设置按钮组合中的按钮尺寸、是否禁用、类型、主题和多彩样式。这些属性只是默认值，按钮自己设置的值优先。data-*、id、aria-* 和事件等其余属性会落在按钮组的根元素（role="group"）上。

    组合尺寸

    代码
    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>
    );
}

    组合禁用

    代码
    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>
    );
}

    组合类型

    代码
    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>
    );
}

    分裂按钮组合

    在Button和Dropdown结合的场景下，可以使用分裂按钮，分裂按钮添加了按钮之间的间隔，并改变了按钮的边框圆角

    基础使用

    代码
    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 参考

    Button

    Props

    属性说明类型默认值
    block将按钮设置为块级按钮。booleanfalse
    colorful多彩按钮，仅支持 primary 与 tertiary 类型。未设置时使用所在 ButtonGroup 的值，最终默认为 false。boolean-
    contentClassName内容区域的类名。string-
    disabled禁用状态，优先于 loading。未设置时使用所在 ButtonGroup 的值，最终默认为 false。boolean-
    htmlType原生 button 的 type 值，可选 button、reset 或 submit。HtmlType"button"
    icon按钮图标，可传元素或图标组件；只有组件形式（如 icon={IconAIFilledLevel1}）能获得多彩填充。TypeJSX.Element | Component<{ fill?: IconFill }>-
    iconPosition图标位置，可选 left 或 right。'left' | 'right'"left"
    loading加载状态。加载中按钮保持可聚焦，点击不触发 onClick，submit 按钮也不提交表单。booleanfalse
    noHorizontalPadding去掉水平方向的内边距，可选 true、left、right 或二者的数组；只对设置了图标或处于加载状态的按钮有效。boolean | HorizontalPaddingType | HorizontalPaddingType[]false
    size按钮尺寸，可选 large、default 或 small。未设置时使用所在 ButtonGroup 的值，最终默认为 default。Size-
    theme按钮主题，可选 solid、borderless、light 或 outline。未设置时使用所在 ButtonGroup 的值，最终默认为 light。Theme-
    type按钮类型，可选 primary、secondary、tertiary、warning 或 danger。未设置时使用所在 ButtonGroup 的值，最终默认为 primary。Type-

    class、style、ref 与原生属性和事件（如 id、aria-*、onClick、onMouseDown）落在原生 <button> 上。loading 时 onClick 不会触发。

    ButtonGroup

    Props

    属性说明类型默认值
    colorful多彩样式，作为组内按钮的默认值。boolean-
    disabled禁用状态，作为组内按钮的默认值。boolean-
    size按钮尺寸，作为组内按钮的默认值。Size-
    theme按钮主题，作为组内按钮的默认值。Theme-
    type按钮类型，作为组内按钮的默认值。Type-

    class、style、ref 与原生属性（如 data-*、aria-*）落在按钮组的根元素（role="group"）上。

    SplitButtonGroup

    Props

    属性说明类型默认值
    无

    class、style、ref 与原生属性（如 aria-*）落在分裂按钮组的根元素（role="group"）上。

    Accessibility

    ARIA

    • aria-label 用于表示按钮的作用，对于图标按钮，我们推荐使用此属性
    • aria-disabled 在按钮 disabled 或 loading 时为 true，表示按钮不可操作

    键盘和焦点

    • Button 的焦点管理与原生 button 一致，键盘用户可以使用 Tab 及 Shift + Tab 切换焦点
    • Button 的触发与原生 button 一致，当按钮聚焦时，可以通过 Enter 或 Space 键激活
    • ButtonGroup 中的按钮与单个按钮的焦点管理方式一致，可以通过 Tab 以及 Shift + Tab 进行切换

    文案规范

    • 按钮需要清晰可预测，用户应该能够预测他们点击按钮时会发生什么
    • 按钮应该总是以鼓励行动的强动词开头
    • 为了给用户提供足够的上下文，在按钮上使用 {动词}+{名词} 内容公式；除了常见的动作，如“Done”、“Close”、“Cancel”或“OK”
    ✅ 推荐用法❌ 不推荐用法
    No permission to view this page
    No permission to view this page
    • 当按钮和其他组件一起时候，如果其他组件（比如 Modal 和Sidesheet）已经提供了足够信息的上下文的话，按钮可以只展示 {动词}，如“Add”、“Create”；
    ✅ 推荐用法❌ 不推荐用法
    • 始终按句子大小写（Sentence case）原则书写
    ✅ 推荐用法❌ 不推荐用法
    Create projectCreate
    Create a project
    Edit profileEdit

    设计变量

    下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。
    Sass 变量值用法
    $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