组件
    基础

    按钮

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

    代码演示

    如何引入

    <script setup lang="ts">
    import { Button, ButtonGroup, SplitButtonGroup } from '@fibrous/semi-ui-vue';
</script>

    按钮类型

    按钮支持以下类型：

    • 主按钮（"primary"，默认）
    • 次要按钮（"secondary"）
    • 第三按钮（"tertiary"）
    • 警告按钮（"warning"）
    • 危险按钮（"danger"）
    代码
    <script setup lang="ts">
    import { Button } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div class="btn-margin-right">
        <Button>主要按钮</Button>
        <Button type="secondary">次要按钮</Button>
        <Button type="tertiary">第三按钮</Button>
        <Button type="warning">警告按钮</Button>
        <Button type="danger">危险按钮</Button>
    </div>
</template>

    关于类型字体色值

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

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

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

    主要次要第三警告危险
    代码
    <script setup lang="ts">
    const types = [
        ['primary', '主要'],
        ['secondary', '次要'],
        ['tertiary', '第三'],
        ['warning', '警告'],
        ['danger', '危险'],
    ];
</script>

<template>
    <article>
        <strong v-for="[type, label] in types" :key="type" :style="{ color: `var(--semi-color-${type})`, marginRight: '10px' }">
            {{ label }}
        </strong>
    </article>
</template>

    按钮主题

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

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

    默认的主题为 light

    浅色背景

    代码
    <script setup lang="ts">
    import { Button } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Button :style="{ marginRight: '8px' }" theme="light" type="primary">浅色主要</Button>
    <Button :style="{ marginRight: '8px' }" theme="light" type="secondary">浅色次要</Button>
    <Button :style="{ marginRight: '8px' }" theme="light" type="tertiary">浅色第三</Button>
    <Button :style="{ marginRight: '8px' }" theme="light" type="warning">浅色警告</Button>
    <Button :style="{ marginRight: '8px' }" theme="light" type="danger">浅色危险</Button>
</template>

    深色背景

    代码
    <script setup lang="ts">
    import { Button } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Button :style="{ marginRight: '8px' }" theme="solid" type="primary">深色主要</Button>
    <Button :style="{ marginRight: '8px' }" theme="solid" type="secondary">深色次要</Button>
    <Button :style="{ marginRight: '8px' }" theme="solid" type="tertiary">深色第三</Button>
    <Button :style="{ marginRight: '8px' }" theme="solid" type="warning">深色警告</Button>
    <Button :style="{ marginRight: '8px' }" theme="solid" type="danger">深色危险</Button>
</template>

    无背景

    代码
    <script setup lang="ts">
    import { Button } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Button :style="{ marginRight: '8px' }" theme="borderless" type="primary">主要</Button>
    <Button :style="{ marginRight: '8px' }" theme="borderless" type="secondary">次要</Button>
    <Button :style="{ marginRight: '8px' }" theme="borderless" type="tertiary">第三</Button>
    <Button :style="{ marginRight: '8px' }" theme="borderless" type="warning">警告</Button>
    <Button :style="{ marginRight: '8px' }" theme="borderless" type="danger">危险</Button>
</template>

    边框模式

    代码
    <script setup lang="ts">
    import { Button } from '@fibrous/semi-ui-vue';
</script>

<template>
    <Button :style="{ marginRight: '8px' }" theme="outline" type="primary">主要</Button>
    <Button :style="{ marginRight: '8px' }" theme="outline" type="secondary">次要</Button>
    <Button :style="{ marginRight: '8px' }" theme="outline" type="tertiary">第三</Button>
    <Button :style="{ marginRight: '8px' }" theme="outline" type="warning">警告</Button>
    <Button :style="{ marginRight: '8px' }" theme="outline" type="danger">危险</Button>
</template>

    尺寸

    默认定义了三种尺寸：

    • 大："large"
    • 默认："default"
    • 小："small"
    代码
    <script setup lang="ts">
    import { Button } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Button size="large" :style="{ marginRight: '8px' }">大尺寸</Button>
        <Button size="default" :style="{ marginRight: '8px' }">默认尺寸</Button>
        <Button size="small">小尺寸</Button>
    </div>
</template>

    块级按钮

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

    代码
    <script setup lang="ts">
    import { Button } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div>
        <Button block>块级按钮</Button>
    </div>
</template>

    图标按钮

    可定义按钮的图标。

    图标写在 #icon 插槽中，位置由 iconPosition 决定。

    默认状态：

    禁用状态：

    复合类型：

    更改主题：

    更改图标位置：

    代码
    <script setup lang="ts">
    import { IconCamera, IconChevronDown, IconSidebar } from '@fibrous/semi-icons-vue';
    import { Button } from '@fibrous/semi-ui-vue';
</script>

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

    链接按钮

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

    禁用状态

    代码
    <script setup lang="ts">
    import { Button } from '@fibrous/semi-ui-vue';
</script>

<template>
    <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>
</template>

    加载状态

    按钮支持加载状态，通过设置 loading 参数值为 true 即可，注意：disabled 状态优先级高于 loading 状态。

    代码
    <script setup lang="ts">
    import { ref } from 'vue';
    import { IconDelete } from '@fibrous/semi-icons-vue';
    import { Button } from '@fibrous/semi-ui-vue';

    const saveLoading = ref(false);
    const delLoading = ref(true);
    const repLoading = ref(true);

    const reset = (status: boolean) => {
        saveLoading.value = status;
        delLoading.value = status;
        repLoading.value = status;
    };
</script>

<template>
    <div>
        <div>
            <div class="btn-margin-right" :style="{ display: 'inline-flex', alignItems: 'center', paddingBottom: '14px' }">
                <Button @click="reset(false)">关闭加载态</Button>
                <Button @click="reset(true)">开启加载态</Button>
            </div>
        </div>
        <hr />
        <Button :loading="saveLoading" :style="{ marginRight: '14px' }" @click="saveLoading = true">保存</Button>
        <Button :loading="delLoading" :style="{ marginRight: '14px' }" type="danger" @click="delLoading = true">
            <template #icon>
                <IconDelete />
            </template>
            删除
        </Button>
        <div :style="{ width: '200px', display: 'inline-block' }">
            <Button block :loading="repLoading" theme="solid" type="warning" @click="repLoading = true">撤销</Button>
        </div>
    </div>
</template>

    AI 风格 - 多彩按钮

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

    代码
    <script setup lang="ts">
    import { IconAIFilledLevel1, IconAIFilledLevel2, IconAIFilledLevel3 } from '@fibrous/semi-icons-vue';
    import { Button } from '@fibrous/semi-ui-vue';

    const contents = ['Colorful', undefined];
    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;
</script>

<!-- The text goes in an explicit #default: after a sibling #icon template, a bare {{ content }} gets a leading space,
     which would count as text and break the icon-only layout. -->
<template>
    <div v-for="content in contents" :key="content ?? 'icon-only'" :style="{ display: 'flex', rowGap: '16px', marginTop: '20px', marginLeft: '10px', flexDirection: 'column' }">
        <div v-for="row in rows" :key="row.theme" :style="{ display: 'flex', columnGap: '16px' }">
            <Button :aria-label="content ? undefined : 'AI'" colorful :theme="row.theme" type="primary">
                <template #icon>
                    <component :is="row.primaryIcon" />
                </template>
                <template #default>{{ content }}</template>
            </Button>
            <Button :aria-label="content ? undefined : 'AI'" colorful loading :theme="row.theme" type="primary">
                {{ content }}
            </Button>
            <Button :aria-label="content ? undefined : 'AI'" colorful disabled :theme="row.theme" type="primary">
                <template #icon>
                    <component :is="row.primaryIcon" />
                </template>
                <template #default>{{ content }}</template>
            </Button>
            <Button :aria-label="content ? undefined : 'AI'" colorful :theme="row.theme" type="tertiary">
                <template #icon>
                    <component :is="row.tertiaryIcon" />
                </template>
                <template #default>{{ content }}</template>
            </Button>
            <Button :aria-label="content ? undefined : 'AI'" colorful loading :theme="row.theme" type="tertiary">
                {{ content }}
            </Button>
            <Button :aria-label="content ? undefined : 'AI'" colorful disabled :theme="row.theme" type="tertiary">
                <template #icon>
                    <component :is="row.tertiaryIcon" />
                </template>
                <template #default>{{ content }}</template>
            </Button>
        </div>
    </div>
</template>

    按钮组合

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

    组合尺寸

    代码
    <script setup lang="ts">
    import { Button, ButtonGroup } from '@fibrous/semi-ui-vue';

    const sizes = ['large', 'default', 'small'] as const;
</script>

<template>
    <div :style="{ display: 'flex' }">
        <div v-for="size in sizes" :key="size" :style="{ marginRight: '10px' }">
            <ButtonGroup aria-label="操作按钮组" :size="size">
                <Button>拷贝</Button>
                <Button>查询</Button>
                <Button>剪切</Button>
            </ButtonGroup>
        </div>
    </div>
</template>

    组合禁用

    代码
    <script setup lang="ts">
    import { Button, ButtonGroup } from '@fibrous/semi-ui-vue';
</script>

<template>
    <div :style="{ display: 'flex' }">
        <div :style="{ marginRight: '10px' }">
            <ButtonGroup disabled>
                <Button>拷贝</Button>
                <Button>查询</Button>
                <Button>剪切</Button>
            </ButtonGroup>
        </div>
    </div>
</template>

    组合类型

    代码
    <script setup lang="ts">
    import { Button, ButtonGroup } from '@fibrous/semi-ui-vue';

    const types = ['primary', 'secondary', 'tertiary', 'warning', 'danger'] as const;
</script>

<template>
    <div :style="{ display: 'flex' }">
        <div v-for="type in types" :key="type" :style="{ marginRight: '10px' }">
            <ButtonGroup aria-label="操作按钮组" :type="type">
                <Button>拷贝</Button>
                <Button>查询</Button>
                <Button>剪切</Button>
            </ButtonGroup>
        </div>
    </div>
</template>

    分裂按钮组合

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

    基础使用

    代码
    <script setup lang="ts">
    import { reactive } from 'vue';
    import { IconTreeTriangleDown } from '@fibrous/semi-icons-vue';
    import { Button, Dropdown, SplitButtonGroup, type DropDownMenuItem } from '@fibrous/semi-ui-vue';

    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' },
    ];

    const btnVisible = reactive<Record<number, boolean>>({ 1: false, 2: false, 3: false });
</script>

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

    API 参考

    Button

    Props

    属性说明类型默认值
    block将按钮设置为块级按钮。booleansemiDefault("Button", "block", false)
    colorful多彩按钮，仅支持 primary 与 tertiary 类型。未设置时使用所在 ButtonGroup 的值，最终默认为 false。booleanundefined
    contentClassName内容区域的类名。stringsemiGlobalDefault("Button", "contentClassName")
    disabled禁用状态，优先于 loading。未设置时使用所在 ButtonGroup 的值，最终默认为 false。booleanundefined
    htmlType原生 button 的 type 值，可选 button、reset 或 submit。HtmlTypesemiDefault("Button", "htmlType", "button")
    iconPosition图标位置，可选 left 或 right。"left" | "right"semiDefault("Button", "iconPosition", strings.DEFAULT_ICON_POSITION)
    loading加载状态。加载中按钮保持可聚焦，点击不触发 click，submit 按钮也不提交表单。booleansemiDefault("Button", "loading", false)
    noHorizontalPadding去掉水平方向的内边距，可选 true、left、right 或二者的数组；只对设置了图标或处于加载状态的按钮有效。boolean | HorizontalPaddingType | HorizontalPaddingType[]semiDefault("Button", "noHorizontalPadding", false)
    size按钮尺寸，可选 large、default 或 small。未设置时使用所在 ButtonGroup 的值，最终默认为 default。Sizeundefined
    theme按钮主题，可选 solid、borderless、light 或 outline。未设置时使用所在 ButtonGroup 的值，最终默认为 light。Themeundefined
    type按钮类型，可选 primary、secondary、tertiary、warning 或 danger。未设置时使用所在 ButtonGroup 的值，最终默认为 primary。Typeundefined

    Events

    事件说明回调参数
    无

    Slots

    插槽说明作用域参数
    default按钮的文字内容。any
    icon按钮图标，位置由 iconPosition 决定。any

    Exposes

    名称说明类型
    无

    class、style 与原生属性（如 id、aria-*）经 attrs 落在原生 <button> 上；click、mousedown、mouseenter、mouseleave 等原生事件用 @click 等监听，载荷为原生 MouseEvent。loading 时 click 不会触发。

    ButtonGroup

    Props

    属性说明类型默认值
    colorful多彩样式，作为组内按钮的默认值。booleansemiGlobalDefault("ButtonGroup", "colorful")
    disabled禁用状态，作为组内按钮的默认值。booleansemiGlobalDefault("ButtonGroup", "disabled")
    size按钮尺寸，作为组内按钮的默认值。SizesemiGlobalDefault("ButtonGroup", "size")
    theme按钮主题，作为组内按钮的默认值。ThemesemiGlobalDefault("ButtonGroup", "theme")
    type按钮类型，作为组内按钮的默认值。TypesemiGlobalDefault("ButtonGroup", "type")

    Events

    事件说明回调参数
    无

    Slots

    插槽说明作用域参数
    default组内的 Button。any

    Exposes

    名称说明类型
    无

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

    SplitButtonGroup

    Props

    属性说明类型默认值
    无

    Events

    事件说明回调参数
    无

    Slots

    插槽说明作用域参数
    default分裂按钮：一个 Button 加一个包裹 Button 的 Dropdown。any

    Exposes

    名称说明类型
    无

    class、style 与原生属性（如 aria-*）经 attrs 落在分裂按钮组的根元素（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

    • 为什么 Button 的图标不显示？

      图标通过 #icon 插槽传入，不是 icon 属性：<Button><template #icon><IconCamera /></template></Button>。