Button

Used to trigger an operation.

Basic

The basic Button contains an animation effect.

Loading

Show running status.

Disabled

Do not respond to any action.

Shadow

The shadow highlights the level of the button.

Types

Different state.

GHOST

The opposite color.

Scale

Buttons of different sizes.

With Icons

The color and size of the icon will be set automatically.

APIs

Button.Props

AttributeDescriptionTypeAccepted valuesDefault
typebutton typeButtonTypesButtonTypesdefault
ghostthe opposite colorboolean-false
loadingdisplay loading indicatorboolean-false
shadowdisplay shadowboolean-false
autoautoscale widthboolean-false
effectdisplay animationboolean-true
disableddisable buttonboolean-false
onClickclick handlerMouseEventHandler--
iconshow icon in buttonReactNode--
iconRightshow icon on the other side of the buttonReactNode--
htmlTypenative type of button elementButtonHTMLAttributes.type-button
refforwardRefRef<HTMLButtonElement | null >--
...native propsButtonHTMLAttributes'id', 'className', ...-

ButtonTypes

type ButtonTypes =
  | 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'abort'
  | 'secondary-light'
  | 'success-light'
  | 'warning-light'
  | 'error-light'