Basic · 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): main
  • var(--semi-color-secondary): secondary
  • var(--semi-color-colored): third
  • var(--semi-color-warning): warning
  • var(--semi-color-danger): danger
You can define your elements directly using these theme colors.

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

Dark Background

No Background

Border Mode

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.
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

PropertiesInstructionsTypeDefault
aria-labelLabel of the buttonstring-
blockSet the button to the block level buttonbooleanfalse
classNameClass namestring
contentClassNamecontent classNamestring-
disabledProhibited statusbooleanfalse
htmlTypeSet the button native type value, optional values: "button", "reset", "submit"string"button"
iconIconReactNode
iconPositionIcon location, optional value: "left"|"right"string"left"
loadingLoading statebooleanfalse
noHorizontalPaddingSet 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
sizeButton size, optional value: "large","default","small"string"default"
styleCustom styleCSSProperties
themeButton theme, optional value: "solid" (with background color), "borderless" (no background color), "light" (light background color), "outline"(Border Mode)string"light"
typeType, optional values: "primary","secondary", "tertiary", "warning", "danger"string"primary"
onClickClick eventFunction(MouseEvent)
onMouseDownMouse downFunction(MouseEvent)
onMouseEnterMouse EnterFunction(MouseEvent)
onMouseLeaveMouse LeaveFunction(MouseEvent)

ButtonGroup

PropertiesInstructionsTypeDefaultVersion
aria-labelLabel of the button groupstring-
classNameCustom class namestring-
disabledDisabled statusbooleanfalse
sizeButton size, optional value: "large","default","small"string"default"
styleCustom styleCSSProperties-2.20.0
themeButton theme, optional values: "solid" (with background color), "borderless" (without background color), "light" (light background color),"outline"(Border Mode)string"light"
typeType, optional values: "primary","secondary", "tertiary", "warning", "danger"string"primary"

SplitButtonGroup V1.12.0

PropertiesInstructionsTypeDefault
aria-labelLabel of the button groupstring-
classNameCustom class namestring-
styleCustom styleCSSProperties-

Accessibility

ARIA

  • aria-label is used to indicate the function of the button. For icon buttons, we recommend using this attribute
  • aria-disabled is synchronized with the disabled attribute, indicating that the button is disabled

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 projectCreate
Create a project
Edit profileEdit

Design Tokens