Button

Used to trigger an operation.

Default

The basic Button contains an animation effect.

Secondary

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.

Sizes

Buttons of different sizes.

With Icons

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

Link

Anchor in button style

APIs / Schnittstellendokumentation

Button.Props

AttributeDescriptionTypeAccepted valuesDefault
typebutton typeButtonTypesButtonTypesdefault
sizebutton sizeNormalSizesNormalSizesmedium
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', ...-

ButtonLink.Props

AttributeDescriptionTypeAccepted valuesDefault
hrefLink targetstring--
sizebutton link sizeNormalSizesNormalSizesmedium
ghostthe opposite colorboolean-false
loadingdisplay loading indicatorboolean-false
shadowdisplay shadowboolean-false
autoautoscale widthboolean-false
effectdisplay animationboolean-true
disableddisable button linkboolean-false
onClickclick handlerMouseEventHandler--
iconshow icon in button linkReactNode--
iconRightshow icon on the other side of the button linkReactNode--
refforwardRefRef<HTMLAnchorElement | null>--
...native propsAnchorHTMLAttributes'id', 'className', ...-

ButtonTypes

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

NormalSizes

type NormalSizes = 'mini' | 'small' | 'medium' | 'large'

Co-Creators