按钮 - Semi Design Next

代码演示

如何引入

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

按钮类型

按钮支持以下类型：

主按钮（"primary"，默认）
次要按钮（"secondary"）
第三按钮（"tertiary"）
警告按钮（"warning"）
危险按钮（"danger"）

代码

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

export default function ButtonDemo() {
    return (
        <div className="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)：危险

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

主要次要第三警告危险

代码

export default function ButtonDemo() {
    const types = [
        ['primary', '主要'],
        ['secondary', '次要'],
        ['tertiary', '第三'],
        ['warning', '警告'],
        ['danger', '危险'],
    ];

    return (
        <article>
            {types.map(([type, label]) => (
                <strong key={type} style={{ color: `var(--semi-color-${type})`, marginRight: 10 }}>
                    {label}
                </strong>
            ))}
        </article>
    );
}

按钮主题

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

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

默认的主题为 light

浅色背景

代码

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

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

深色背景

代码

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

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

无背景

代码

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

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

边框模式

代码

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

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

尺寸

默认定义了三种尺寸：

大："large"
默认："default"
小："small"

代码

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

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

块级按钮

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

代码

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

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

图标按钮

可定义按钮的图标。

默认状态：

禁用状态：

复合类型：

更改主题：

更改图标位置：

代码

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

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 className="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={{ marginRight: 10 }} aria-label="截屏" />
            <Button icon={<IconCamera />} theme="light" aria-label="截屏" />
            <br />
            <br />
            <strong>更改图标位置：</strong>
            <Button icon={<IconSidebar />} theme="solid" style={{ marginRight: 10 }}>
                收起
            </Button>
            <Button icon={<IconChevronDown />} theme="solid" iconPosition="right">
                展开选项
            </Button>
            <br />
            <br />
        </div>
    );
}

链接按钮

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

链接文本

打开网站

带下划线的网页链接

代码

import { IconLink } from '@fibrous/semi-icons-react';
import { Typography } from '@fibrous/semi-ui-react';

export default function ButtonDemo() {
    const { Text } = Typography;
    return (
        <div>
            <Text link={{ href: 'https://semi.design/' }}>链接文本</Text>
            <br />
            <br />
            <Text link={{ href: 'https://semi.design/' }}>打开网站</Text>
            <br />
            <br />
            <Text link icon={<IconLink />} underline>
                带下划线的网页链接
            </Text>
        </div>
    );
}

禁用状态

代码

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

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 { useState } from 'react';
import { IconDelete } from '@fibrous/semi-icons-react';
import { Button } from '@fibrous/semi-ui-react';

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

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

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

AI 风格 - 多彩按钮

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

代码

import { IconAIFilledLevel1, IconAIFilledLevel2, IconAIFilledLevel3 } from '@fibrous/semi-icons-react';
import { Button } from '@fibrous/semi-ui-react';

export default function ButtonDemo() {
    return (
        <>
            {['Colorful', undefined].map((content) => (
                <div key={content ?? 'icon-only'} style={{ display: 'flex', rowGap: 16, marginTop: 20, marginLeft: 10, flexDirection: 'column' }}>
                    <div style={{ display: 'flex', columnGap: 16 }}>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="solid" type="primary" icon={<IconAIFilledLevel1 />}>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="solid" type="primary" loading>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="solid" type="primary" icon={<IconAIFilledLevel1 />} disabled>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="solid" type="tertiary" icon={<IconAIFilledLevel3 />}>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="solid" type="tertiary" loading>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="solid" type="tertiary" icon={<IconAIFilledLevel3 />} disabled>
                            {content}
                        </Button>
                    </div>
                    <div style={{ display: 'flex', columnGap: 16 }}>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="light" type="primary" icon={<IconAIFilledLevel3 />}>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="light" type="primary" loading>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="light" type="primary" icon={<IconAIFilledLevel3 />} disabled>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="light" type="tertiary" icon={<IconAIFilledLevel2 />}>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="light" type="tertiary" loading>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="light" type="tertiary" icon={<IconAIFilledLevel2 />} disabled>
                            {content}
                        </Button>
                    </div>
                    <div style={{ display: 'flex', columnGap: 16 }}>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="outline" type="primary" icon={<IconAIFilledLevel1 />}>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="outline" type="primary" loading>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="outline" type="primary" icon={<IconAIFilledLevel1 />} disabled>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="outline" type="tertiary" icon={<IconAIFilledLevel2 />}>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="outline" type="tertiary" loading>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="outline" type="tertiary" icon={<IconAIFilledLevel2 />} disabled>
                            {content}
                        </Button>
                    </div>
                    <div style={{ display: 'flex', columnGap: 16 }}>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="borderless" type="primary" icon={<IconAIFilledLevel3 />}>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="borderless" type="primary" loading>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="borderless" type="primary" icon={<IconAIFilledLevel3 />} disabled>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="borderless" type="tertiary" icon={<IconAIFilledLevel2 />}>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="borderless" type="tertiary" loading>
                            {content}
                        </Button>
                        <Button colorful aria-label={content ? undefined : 'AI'} theme="borderless" type="tertiary" icon={<IconAIFilledLevel2 />} disabled>
                            {content}
                        </Button>
                    </div>
                </div>
            ))}
        </>
    );
}

按钮组合

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

组合尺寸

代码

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

export default function ButtonDemo() {
    const sizes = ['large', 'default', 'small'] as const;

    return (
        <div style={{ display: 'flex' }}>
            {sizes.map((size) => (
                <div style={{ marginRight: 10 }} key={size}>
                    <ButtonGroup size={size} aria-label="操作按钮组">
                        <Button>拷贝</Button>
                        <Button>查询</Button>
                        <Button>剪切</Button>
                    </ButtonGroup>
                </div>
            ))}
        </div>
    );
}

组合禁用

代码

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

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

组合类型

代码

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

export default function ButtonDemo() {
    const types = ['primary', 'secondary', 'tertiary', 'warning', 'danger'] as const;

    return (
        <div style={{ display: 'flex' }}>
            {types.map((type) => (
                <div style={{ marginRight: 10 }} key={type}>
                    <ButtonGroup type={type} aria-label="操作按钮组">
                        <Button>拷贝</Button>
                        <Button>查询</Button>
                        <Button>剪切</Button>
                    </ButtonGroup>
                </div>
            ))}
        </div>
    );
}

分裂按钮组合

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

基础使用

代码

import { useState } from 'react';
import { IconTreeTriangleDown } from '@fibrous/semi-icons-react';
import { SplitButtonGroup, Dropdown, Button, type DropDownMenuItem } from '@fibrous/semi-ui-react';

export default function ButtonDemo() {
    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, setBtnVisible] = useState<Record<number, boolean>>({
        1: false,
        2: false,
        3: false,
    });

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

    return (
        <div>
            <SplitButtonGroup style={{ marginRight: 10 }} aria-label="项目操作按钮组">
                <Button theme="solid" type="primary">
                    分裂按钮
                </Button>
                <Dropdown onVisibleChange={(v) => handleVisibleChange(1, v)} menu={menu} trigger="click" position="bottomRight">
                    <Button 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={{ marginRight: 10 }} aria-label="项目操作按钮组">
                <Button theme="light" type="primary">
                    分裂按钮
                </Button>
                <Dropdown onVisibleChange={(v) => handleVisibleChange(2, v)} menu={menu} trigger="click" position="bottomRight">
                    <Button 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">
                    <Button 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

属性	说明	类型	默认值
aria-label	按钮的可访问名称，只有图标没有文字的按钮需要设置。	`React.AriaAttributes['aria-label']`	-
block	将按钮设置为块级按钮。	`boolean`	`false`
children	按钮文字或内容。	`ReactNode`	-
className	原生 button 元素的类名。	`string`	-
colorful	多彩按钮，仅支持 primary 与 tertiary 类型；图标元素会获得多彩填充。未设置时使用所在 ButtonGroup 的值，不在组内时为 `false`。	`boolean`	-
contentClassName	内容区域的类名。	`string`	-
disabled	禁用状态，优先于 loading。未设置时使用所在 ButtonGroup 的值，不在组内时为 `false`。	`boolean`	-
htmlType	原生 button 的 type 值，可选 `button`、`reset` 或 `submit`。	`HtmlType`	`"button"`
icon	按钮图标。	`React.ReactNode`	-
iconPosition	图标位置，可选 `left` 或 `right`。	`'left' \| 'right'`	`"left"`
id	原生 button 元素的 id。	`string`	-
loading	加载状态。加载中按钮保持可聚焦，点击不触发 onClick，submit 按钮也不提交表单。	`boolean`	`false`
noHorizontalPadding	去掉水平方向的内边距，可选 `true`、`left`、`right` 或二者的数组；只对设置了图标或处于加载状态的按钮有效。	`boolean \| HorizontalPaddingType \| HorizontalPaddingType[]`	`false`
onClick	单击按钮时调用；禁用或加载中不调用。	`Type`	-
onMouseDown	鼠标按下时调用。	`Type`	-
onMouseEnter	鼠标移入时调用。	`Type`	-
onMouseLeave	鼠标移出时调用。	`Type`	-
prefixCls	类名前缀。	`string`	`"semi-button"`
ref	原生 button 元素的引用。	`Type`	-
size	按钮尺寸，可选 `large`、`default` 或 `small`。未设置时使用所在 ButtonGroup 的值，不在组内时为 `default`。	`Size`	-
style	原生 button 元素的样式。	`React.CSSProperties`	-
theme	按钮主题，可选 `solid`、`borderless`、`light` 或 `outline`。未设置时使用所在 ButtonGroup 的值，不在组内时为 `light`。	`Theme`	-
type	按钮类型，可选 `primary`、`secondary`、`tertiary`、`warning` 或 `danger`。未设置时使用所在 ButtonGroup 的值，不在组内时为 `primary`。	`Type`	-

其他原生属性（如 data-*、onFocus）落在原生 <button> 上。

ButtonGroup

Props

属性	说明	类型	默认值
children	组内的按钮。	`React.ReactNode`	-
className	根元素的类名。	`string`	-
colorful	多彩样式，作为组内按钮的默认值。	`boolean`	-
disabled	禁用状态，作为组内按钮的默认值。	`boolean`	-
ref	根元素（`role="group"`）的引用。	`Type`	-
size	按钮尺寸，作为组内按钮的默认值。	`Size`	-
style	根元素的样式。	`CSSProperties`	-
theme	按钮主题，作为组内按钮的默认值。	`Theme`	-
type	按钮类型，作为组内按钮的默认值。	`Type`	-

其他原生属性（如 aria-label、data-*）落在按钮组的根元素（role="group"）上。

SplitButtonGroup

Props

属性	说明	类型	默认值
aria-label	分裂按钮组的可访问名称。	`React.AriaAttributes['aria-label']`	-
children	组内的按钮。	`ReactNode`	-
className	根元素的类名。	`string`	-
ref	根元素（`role="group"`）的引用。	`Type`	-
style	根元素的样式。	`CSSProperties`	-

其他原生属性落在分裂按钮组的根元素（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 project	Create Create a project
Edit profile	Edit

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$transition_duration-button_primary-bg	var(--semi-transition_duration-none)	主要按钮-背景色-动画持续时间
$transition_function-button_primary-bg	var(--semi-transition_function-easeIn)	主要按钮-背景色-过渡曲线
$transition_delay-button_primary-bg	var(--semi-transition_delay-none)	主要按钮-背景色-延迟时间
$transition_duration-button_secondary-bg	var(--semi-transition_duration-none)	次要按钮-背景色-动画持续时间
$transition_function-button_secondary-bg	var(--semi-transition_function-easeIn)	次要按钮-背景色-过渡曲线
$transition_delay-button_secondary-bg	var(--semi-transition_delay-none)	次要按钮-背景色-延迟时间
$transition_duration-button_tertiary-bg	var(--semi-transition_duration-none)	三级按钮-背景色-动画持续时间
$transition_function-button_tertiary-bg	var(--semi-transition_function-easeIn)	三级按钮-背景色-过渡曲线
$transition_delay-button_tertiary-bg	var(--semi-transition_delay-none)	三级按钮-背景色-延迟时间
$transition_duration-button_light-bg	var(--semi-transition_duration-none)	浅色按钮-背景色-动画持续时间
$transition_function-button_light-bg	var(--semi-transition_function-easeIn)	浅色按钮-背景色-过渡曲线
$transition_delay-button_light-bg	var(--semi-transition_delay-none)	浅色按钮-背景色-延迟时间
$transition_duration-button_warning-bg	var(--semi-transition_duration-none)	警告按钮-背景色-动画持续时间
$transition_function-button_warning-bg	var(--semi-transition_function-easeIn)	警告按钮-背景色-过渡曲线
$transition_delay-button_warning-bg	var(--semi-transition_delay-none)	警告按钮-背景色-延迟时间
$transition_duration-button_danger-bg	var(--semi-transition_duration-none)	危险按钮-背景色-动画持续时间
$transition_function-button_danger-bg	var(--semi-transition_function-easeIn)	危险按钮-背景色-过渡曲线
$transition_delay-button_danger-bg	var(--semi-transition_delay-none)	危险按钮-背景色-延迟时间
$transition_duration-button_borderless-bg	var(--semi-transition_duration-none)	无边框按钮-背景色-动画持续时间
$transition_function-button_borderless-bg	var(--semi-transition_function-easeIn)	无边框按钮-背景色-过渡曲线
$transition_delay-button_borderless-bg	var(--semi-transition_delay-none)	无边框按钮-背景色-延迟时间
$transition_duration-button_primary-border	var(--semi-transition_duration-none)	主要按钮-边框-动画持续时间
$transition_function-button_primary-border	var(--semi-transition_function-easeIn)	主要按钮-边框-过渡曲线
$transition_delay-button_primary-border	var(--semi-transition_delay-none)	主要按钮-边框-延迟时间
$transition_duration-button_secondary-border	var(--semi-transition_duration-none)	次要按钮-边框-动画持续时间
$transition_function-button_secondary-border	var(--semi-transition_function-easeIn)	次要按钮-边框-过渡曲线
$transition_delay-button_secondary-border	var(--semi-transition_delay-none)	次要按钮-边框-延迟时间
$transition_duration-button_tertiary-border	var(--semi-transition_duration-none)	三级按钮-边框-动画持续时间
$transition_function-button_tertiary-border	var(--semi-transition_function-easeIn)	三级按钮-边框-过渡曲线
$transition_delay-button_tertiary-border	var(--semi-transition_delay-none)	三级按钮-边框-延迟时间
$transition_duration-button_light-border	var(--semi-transition_duration-none)	浅色按钮-边框-动画持续时间
$transition_function-button_light-border	var(--semi-transition_function-easeIn)	浅色按钮-边框-过渡曲线
$transition_delay-button_light-border	var(--semi-transition_delay-none)	浅色按钮-边框-延迟时间
$transition_duration-button_warning-border	var(--semi-transition_duration-none)	警告按钮-边框-动画持续时间
$transition_function-button_warning-border	var(--semi-transition_function-easeIn)	警告按钮-边框-过渡曲线
$transition_delay-button_warning-border	var(--semi-transition_delay-none)	警告按钮-边框-延迟时间
$transition_duration-button_danger-border	var(--semi-transition_duration-none)	危险按钮-边框-动画持续时间
$transition_function-button_danger-border	var(--semi-transition_function-easeIn)	危险按钮-边框-过渡曲线
$transition_delay-button_danger-border	var(--semi-transition_delay-none)	危险按钮-边框-延迟时间
$transform_scale-button_primary	var(--semi-transform_scale-none)	主要按钮-放大
$transform_scale-button_secondary	var(--semi-transform_scale-none)	次要按钮-放大
$transform_scale-button_tertiary	var(--semi-transform_scale-none)	三级按钮-放大
$transform_scale-button_light	var(--semi-transform_scale-none)	浅色按钮-放大
$transform_scale-button_warning	var(--semi-transform_scale-none)	警告按钮-放大
$transform_scale-button_danger	var(--semi-transform_scale-none)	危险按钮-放大
$transform_scale-button_borderless	var(--semi-transform_scale-none)	无边框按钮-放大
$animation_duration-button_icon_loading	600ms	加载图标容器旋转一周时长
$color-button_primary-bg-default	var(--semi-color-primary)	主要按钮背景颜色
$color-button_primary-border-default	transparent	主要按钮描边颜色
$color-button_primary-text-default	var(--semi-white)	主要按钮文字颜色 - solid 模式
$color-button_primary-bg-hover	var(--semi-color-primary-hover)	主要按钮背景颜色 - 悬浮
$color-button_primary-bg-active	var(--semi-color-primary-active)	主要按钮背景颜色 - 按下
$color-button_primary_outline-focus	$color-focus-ring	主要按钮轮廓 - 聚焦
$color-button_primary_outline-border-default	var(--semi-color-border)	主要按钮边框颜色 - 边框模式
$color-button_primary_borderless-text-default	var(--semi-color-primary)	主要按钮文字颜色 - 浅色/边框/无边框模式
$color-button_primary_solid_colorful-bg-default	var(--semi-color-ai-general)	Colorful 主要按钮背景颜色 - solid 主题
$color-button_primary_solid_colorful-bg-hover	var(--semi-color-ai-general-hover)	Colorful 主要按钮背景颜色 - solid 主题 - 悬浮
$color-button_primary_solid_colorful-bg-active	var(--semi-color-ai-general-active)	Colorful 主要按钮背景颜色 - solid 主题 - 按下
$color-button_primary_light_colorful-text-default	var(--semi-color-ai-general)	Colorful 主要按钮文字填充色 - 浅色模式
$color-button_primary_light_outline-text-default	var(--semi-color-ai-purple)	Colorful 主要按钮文字颜色 - 边框模式
$color-button_primary_light_outline-border	var(--semi-color-ai-purple)	Colorful 主要按钮边框颜色 - 边框模式
$color-button_primary_light_borderless-text-default	var(--semi-color-ai-general)	Colorful 主要按钮文字填充色 - 无边框模式
$color-button_secondary-bg-default	var(--semi-color-secondary)	次要按钮背景颜色
$color-button_secondary-border-default	var(--semi-color-secondary)	次要按钮描边颜色
$color-button_secondary-text-default	var(--semi-white)	次要按钮文字颜色 - solid 模式
$color-button_secondary-bg-hover	var(--semi-color-secondary-hover)	次要按钮背景颜色 - 悬浮
$color-button_secondary-bg-active	var(--semi-color-secondary-active)	次要按钮背景颜色 - 按下
$color-button_secondary_outline-border-default	var(--semi-color-border)	次要按钮边框颜色 - 边框模式
$color-button_secondary_borderless-text-default	var(--semi-color-secondary)	次要按钮文字颜色 - 浅色/边框/无边框模式
$color-button_danger-bg-default	var(--semi-color-danger)	危险按钮背景颜色
$color-button_danger-text-default	var(--semi-white)	危险按钮文字颜色 - solid 模式
$color-button_danger-bg-hover	var(--semi-color-danger-hover)	危险按钮背景颜色 - 悬浮
$color-button_danger-bg-active	var(--semi-color-danger-active)	危险按钮背景颜色 - 按下
$color-button_danger-outline-focus	var(--semi-color-danger-light-active)	危险按钮轮廓 - 聚焦
$color-button_danger_outline-border-default	var(--semi-color-danger)	危险按钮边框颜色 - 边框模式
$color-button_danger_borderless-text-default	var(--semi-color-danger)	危险按钮文字颜色 - 浅色/边框/无边框模式
$color-button_warning-bg-default	var(--semi-color-warning)	警告按钮背景颜色
$color-button_warning-text-default	var(--semi-white)	警告按钮文字颜色 - solid 模式
$color-button_warning-bg-hover	var(--semi-color-warning-hover)	警告按钮背景颜色 - 悬浮
$color-button_warning-bg-active	var(--semi-color-warning-active)	警告按钮背景颜色 - 按下
$color-button_warning-outline-focus	var(--semi-color-warning-light-active)	警告按钮轮廓 - 聚焦
$color-button_warning_outline-border-default	var(--semi-color-warning)	警告按钮边框颜色 - 边框模式
$color-button_warning_borderless-text-default	var(--semi-color-warning)	警告按钮文字颜色 - 浅色/边框/无边框模式
$color-button_tertiary-bg-default	var(--semi-color-tertiary)	第三按钮背景颜色
$color-button_tertiary-text-default	var(--semi-white)	第三按钮文字颜色 - solid 模式
$color-button_tertiary_solid_colorful-bg-default	var(--semi-ai-general-0)	colorful 第三按钮背景颜色
$color-button_tertiary_solid_colorful-bg-hover	var(--semi-ai-general-1)	colorful 第三按钮背景颜色 - 悬浮
$color-button_tertiary_solid_colorful-bg-active	var(--semi-ai-general-2)	colorful 第三按钮背景颜色 - 按下
$color-button_tertiary_solid_colorful-text-default	var(--semi-color-ai-general)	Colorful 第三按钮文字填充色 - solid 主题
$color-button_tertiary-bg-hover	var(--semi-color-tertiary-hover)	第三按钮背景颜色 - 悬浮
$color-button_tertiary-bg-active	var(--semi-color-tertiary-active)	第三按钮背景颜色 - 按下
$color-button_tertiary_outline-border-default	var(--semi-color-border)	第三按钮边框颜色 - 边框模式
$color-button_tertiary_solid-text-default	var(--semi-color-text-1)	第三按钮文字颜色 - 浅色/边框/无边框模式
$color-button_disabled_solid-text-default	var(--semi-color-disabled-text)	禁用按钮文字颜色 - solid 主题
$color-button_disabled-text-default	var(--semi-color-disabled-text)	禁用按钮文字颜色 - 浅色主题或无背景
$color-button_disabled_outline_text-default	var(--semi-color-disabled-text)	禁用按钮文字颜色 - 边框模式
$color-button_disabled-bg-default	var(--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-default	var(--semi-color-border)	禁用按钮边框颜色 - 边框模式
$color-button_light-bg-default	var(--semi-color-fill-0)	浅色按钮背景颜色
$color-button_light-bg-hover	var(--semi-color-fill-1)	浅色按钮背景颜色 - 悬浮
$color-button_light-bg-active	var(--semi-color-fill-2)	浅色按钮背景颜色 - 按下
$color-button_light-border-default	transparent	浅色按钮描边颜色
$color-button_light-border-hover	$color-button_light-border-default	浅色按钮描边颜色 - 悬浮
$color-button_light-border-active	$color-button_light-border-hover	浅色按钮描边颜色 - 按下
$width-button_light-border	0	浅色按钮描边宽度
$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-hover	var(--semi-color-fill-0)	无背景按钮背景颜色 - 悬浮
$color-button_borderless-bg-active	var(--semi-color-fill-1)	无背景按钮背景颜色 - 按下
$color-button_borderless-border-default	transparent	无背景按钮描边颜色
$color-button_borderless-border-hover	$color-button_borderless-border-default	无背景按钮描边颜色 - 悬浮
$color-button_borderless-border-active	$color-button_borderless-border-hover	无背景按钮描边颜色 - 按下
$width-button_borderless-border	0	无背景按钮描边宽度
$width-button_outline-border	1px	边框模式按钮边框宽度
$color-button_outline-bg-hover	var(--semi-color-fill-0)	边框模式按钮背景颜色 - 悬浮
$color-button_outline-bg-active	var(--semi-color-fill-1)	边框模式按钮背景颜色 - 按下
$color-button_group-border-default	var(--semi-color-border)	按钮组分割线颜色
$width-button_group-border	$border-thickness-control	按钮组分割线宽度
$spacing-button_default-paddingTop	6px	按钮顶部内边距 - 默认
$spacing-button_default-paddingLeft	$spacing-base-tight	按钮左侧内边距 - 默认
$spacing-button_default-paddingRight	$spacing-base-tight	按钮右侧内边距 - 默认
$spacing-button_large-paddingTop	10px	按钮顶部内边距 - 大尺寸
$spacing-button_large-paddingBottom	10px	按钮底部内边距 - 大尺寸
$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-lineHeight	20px	按钮文字行高 - 默认
$font-button_small-fontWeight	$font-weight-bold	按钮文字字重 - 小尺寸
$font-button_small-fontSize	$font-size-regular	按钮文字字号- 小尺寸
$font-button_small-lineHeight	20px	按钮文字行高 - 小尺寸
$font-button_large-fontWeight	$font-weight-bold	默认按钮文字字重 - 大尺寸
$font-button_large-fontSize	$font-size-regular	默认按钮文字字号 - 大尺寸
$font-button_large-lineHeight	20px	默认按钮文字行高 - 大尺寸
$height-button_large	$height-control-large	按钮高度 - 大尺寸
$height-button_small	$height-control-small	按钮高度 - 小尺寸
$height-button_default	$height-control-default	按钮高度 - 默认
$height-button_group_line_default	20px	分割线高度 - 默认
$width-button-border	$border-thickness	按钮描边宽度
$radius-button	var(--semi-border-radius-small)	按钮圆角大小
$radius-button_group	$radius-button	按钮组圆角大小
$width-button-outline	$width-focus-ring	按钮轮廓宽度
$radius-button_splitButtonGroup_first_topLeft	var(--semi-border-radius-small)	组合按钮(Split) - 首个按钮左上圆角
$radius-button_splitButtonGroup_first_bottomLeft	var(--semi-border-radius-small)	组合按钮(Split) - 首个按钮左下圆角
$radius-button_splitButtonGroup_last_topRight	var(--semi-border-radius-small)	组合按钮(Split) - 末尾按钮右上圆角
$radius-button_splitButtonGroup_last_bottomRight	var(--semi-border-radius-small)	组合按钮(Split) - 末尾按钮右下圆角

FAQ

为什么Button中的icon属性不起作用？
请检查你的Button import路径，正确的import路径应该为import { Button } from '@fibrous/semi-ui-react;'，如果你错误地从 @fibrous/semi-ui-react/button/button中import的话，获取到的是不带icon功能的基础Button组件

代码演示

如何引入

按钮类型

关于类型字体色值

按钮主题

浅色背景

深色背景

无背景

边框模式

尺寸

块级按钮

图标按钮

链接按钮

禁用状态

加载状态

AI 风格 - 多彩按钮

按钮组合

组合尺寸

组合禁用

组合类型

分裂按钮组合

基础使用

API 参考

Button

ButtonGroup

SplitButtonGroup

Accessibility

ARIA

键盘和焦点

文案规范

设计变量

FAQ

为什么Button中的icon属性不起作用？