Input · Button
Button
Users use buttons to trigger an operation or jump.
Demos
How to import
Button Type
Buttons support the following types:
- Primary button ("primary", default)
- Secondary button ("secondary")
- Tertiary button ("tertiary")
- Warning button ("warning")
- Danger button ("danger")
About the Font Color
CSS Variables are used with the button:
var(--semi-color-primary): mainvar(--semi-color-secondary): secondaryvar(--semi-color-colored): thirdvar(--semi-color-warning): warningvar(--semi-color-danger): danger
You can define your elements directly using these theme colors.
Button Theme
The themes currently available are:
light: light backgroundsolid: dark backgroundborderless: no background
The default theme is
lightLight Background
Dark Background
No Background
Size
Three sizes are defined by default:
- Big: "Large"
- Default: "default."
- Small: "Small"
Block Button
The block button has a predefined width, and its width is independent of the width of the contents of the button.
Icon Button
An icon that defines a button.
Link Button
We recommend using Typography to achieve link text button. Refer to Typography for more information.
Prohibited Status
Loading State
The button supports the Loading state, by setting the loading parameter value to true, note: the state priority is higher than the loading state.
Button Combination
You can put multiple buttons in
ButtonGroup In the container, by setting size, disabled, type You can uniformly set the button size in the button combination, whether disabled and type.Combined Dimensions
Combined Disabled
Combined Type
Split Button Group
V1.12.0
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
API Reference
Button
| Properties | Instructions | Type | Default |
|---|---|---|---|
| aria-label | Label of the button | string | - |
| block | Set the button to the block level button | boolean | false |
| className | Class name | string | |
| disabled | Prohibited status | boolean | false |
| htmlType | Set the button native type value, optional values: "button", "reset", "submit" | string | "button" |
| icon | Icon | ReactNode | |
| iconPosition | Icon location, optional value: "left"|"right" | string | "left" |
| loading | Loading state | boolean | false |
| noHorizontalPadding | Set whether to remove the inner margin in the horizontal direction, only valid for iconButton, optional: true (equivalent to ["left", "right"]), "left", "right", ["left", "right"] | boolean|string| Array<string> | false |
| size | Button size, optional value: "large","default","small" | string | "default" |
| style | Custom style | CSSProperties | |
| theme | Button theme, optional value: "solid" (with background color), "borderless" (no background color), "light" (light background color) | string | "light" |
| type | Type, optional values: "primary","secondary", "late", "warning", "danger" | string | "primary" |
| onClick | Click event | Function(MouseEvent) | |
| onMouseDown | Mouse down | Function(MouseEvent) | |
| onMouseEnter | Mouse Enter | Function(MouseEvent) | |
| onMouseLeave | Mouse Leave | Function(MouseEvent) |
ButtonGroup
| Properties | Instructions | Type | Default | Version |
|---|---|---|---|---|
| aria-label | Label of the button group | string | - | |
| className | Custom class name | string | - | |
| disabled | Disabled status | boolean | false | |
| size | Button size, optional value: "large","default","small" | string | "default" | |
| style | Custom style | CSSProperties | - | 2.20.0 |
| theme | Button theme, optional values: "solid" (with background color), "borderless" (without background color), "light" (light background color) | string | "light" | |
| type | Type, optional values: "primary","secondary", "tertiary", "warning", "danger" | string | "primary" |
SplitButtonGroup V1.12.0
| Properties | Instructions | Type | Default |
|---|---|---|---|
| aria-label | Label of the button group | string | - |
| className | Custom class name | string | - |
| style | Custom style | CSSProperties | - |
Accessibility
ARIA
aria-labelis used to indicate the function of the button. For icon buttons, we recommend using this attributearia-disabledis synchronized with the disabled attribute, indicating that the button is disabled
Keyboard and Focus
Button's focus management is consistent with nativebutton, keyboard users can useTabandShift + Tabto switch focus- The trigger of
Buttonis the same as the nativebutton, when thebuttonis focused, it can be activated byEnterorSpacekey - The buttons in the
ButtonGroupare managed in the same way as the focus of a singlebutton, and can be switched byTabandShift + 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
Designed & Developed with love by Douyin FE & MED