Button

Demos

How to import

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

Button Type

Buttons support the following types:

Primary button ("primary", default)
Secondary button ("secondary")
Tertiary button ("tertiary")
Warning button ("warning")
Danger button ("danger")

Code

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

About the Font Color

CSS Variables are used with the button:

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

You can define your elements directly using these theme colors.

主要次要第三警告危险

Code

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

Button Theme

The themes currently available are:

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

The default theme is light

Light Background

Code

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

Dark Background

Code

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

No Background

Code

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

Border Mode

Code

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

Size

Three sizes are defined by default:

Big: "Large"
Default: "default."
Small: "Small"

Code

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

Block Button

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

Code

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

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

Icon Button

An icon that defines a button.

默认状态：

禁用状态：

复合类型：

更改主题：

更改图标位置：

Code

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

Link Button

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

链接文本

打开网站

带下划线的网页链接

Code

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

Prohibited Status

Code

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 State

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

Code

import { 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 style - Colorful buttons

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

Code

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

Button Combination

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

Combined Dimensions

Code

import { 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>
    );
}

Combined Disabled

Code

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

Combined Type

Code

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

Split Button Group

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

Basic Usage

Code

import { 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 Reference

Props

Property	Description	Type	Default
aria-label	Accessible name of the button, needed when it shows only an icon.	`React.AriaAttributes['aria-label']`	-
block	Renders the button as a block-level button.	`boolean`	`false`
children	Button text or content.	`ReactNode`	-
className	Class name of the native button element.	`string`	-
colorful	Colorful button, supported for the primary and tertiary types only; the icon element receives the colorful fill. Falls back to the ButtonGroup it is in, and to `false` outside a group.	`boolean`	-
contentClassName	Class name of the content area.	`string`	-
disabled	Disabled state, which takes precedence over loading. Falls back to the ButtonGroup it is in, and to `false` outside a group.	`boolean`	-
htmlType	Native type of the button: `button`, `reset` or `submit`.	`HtmlType`	`"button"`
icon	Button icon.	`React.ReactNode`	-
iconPosition	Icon position: `left` or `right`.	`'left' \| 'right'`	`"left"`
id	Id of the native button element.	`string`	-
loading	Loading state. A loading button stays focusable, its onClick is ignored, and a submit button does not submit its form.	`boolean`	`false`
noHorizontalPadding	Removes horizontal padding: `true`, `left`, `right` or an array of both. Applies only to a button that shows an icon or the loading spinner.	`boolean \| HorizontalPaddingType \| HorizontalPaddingType[]`	`false`
onClick	Called when the button is clicked; not called while disabled or loading.	`Type`	-
onMouseDown	Called when the mouse button is pressed on the button.	`Type`	-
onMouseEnter	Called when the pointer enters the button.	`Type`	-
onMouseLeave	Called when the pointer leaves the button.	`Type`	-
prefixCls	Class name prefix.	`string`	`"semi-button"`
ref	Reference to the native button element.	`Type`	-
size	Button size: `large`, `default` or `small`. Falls back to the ButtonGroup it is in, and to `default` outside a group.	`Size`	-
style	Style of the native button element.	`React.CSSProperties`	-
theme	Button theme: `solid`, `borderless`, `light` or `outline`. Falls back to the ButtonGroup it is in, and to `light` outside a group.	`Theme`	-
type	Button type: `primary`, `secondary`, `tertiary`, `warning` or `danger`. Falls back to the ButtonGroup it is in, and to `primary` outside a group.	`Type`	-

Other native attributes (such as data-* and onFocus) land on the native <button>.

ButtonGroup

Props

Property	Description	Type	Default
children	Buttons in the group.	`React.ReactNode`	-
className	Class name of the root element.	`string`	-
colorful	Colorful style, used as the default of the buttons in the group.	`boolean`	-
disabled	Disabled state, used as the default of the buttons in the group.	`boolean`	-
ref	Reference to the root element (`role="group"`).	`Type`	-
size	Button size, used as the default of the buttons in the group.	`Size`	-
style	Style of the root element.	`CSSProperties`	-
theme	Button theme, used as the default of the buttons in the group.	`Theme`	-
type	Button type, used as the default of the buttons in the group.	`Type`	-

Other native attributes (such as aria-label and data-*) land on the group's root element (role="group").

SplitButtonGroup

Props

Property	Description	Type	Default
aria-label	Accessible name of the split button group.	`React.AriaAttributes['aria-label']`	-
children	Buttons in the group.	`ReactNode`	-
className	Class name of the root element.	`string`	-
ref	Reference to the root element (`role="group"`).	`Type`	-
style	Style of the root element.	`CSSProperties`	-

Other native attributes land on the split button group's root element (role="group").

Accessibility

ARIA

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

Keyboard and Focus

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

Content Guidelines

Buttons need to be clear and predictable, users should be able to predict what will happen when they click the button
Buttons should always start with a strong verb that encourages action
To give the user enough context, use {verb}+{noun} content formulas on buttons; in addition to common actions like "Done", "Close", "Cancel" or "OK"

✅ Recommended usage	❌ Deprecated usage
No permission to view this page	No permission to view this page

When the button is combined with other components, the button can only display {verb}, such as "Add", "Create", if the other components (such as Modal and Sidesheet) already provide enough context for the information

✅ Recommended usage	❌ Deprecated usage

Always write in Sentence case

✅ Recommended usage	❌ Deprecated usage
Create project	Create Create a project
Edit profile	Edit

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$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

Why does the icon prop of Button not work?
Please check the import path of Button. The correct import path is import { Button } from '@fibrous/semi-ui-react;'. If you mistakenly import from @fibrous/semi-ui-react/button/button, you get the basic Button component without icon support.

Demos

How to import

Button Type

About the Font Color

Button Theme

Light Background

Dark Background

No Background

Border Mode

Size

Block Button

Icon Button

Link Button

Prohibited Status

Loading State

AI style - Colorful buttons

Button Combination

Combined Dimensions

Combined Disabled

Combined Type

Split Button Group

Basic Usage

API Reference

Button

ButtonGroup

SplitButtonGroup

Accessibility

ARIA

Keyboard and Focus

Content Guidelines

Design Tokens

FAQ

Why does the icon prop of Button not work?