Button

Used to trigger an operation.

General

The basic Button contains an animation effect.

Preview

See code

Loading

Show running status.

Preview

See code

Disabled

Do not respond to any action.

Preview

See code

Shadow

The shadow highlights the level of the button.

Preview

See code

Type Colors

You can change the color of the Button with the property type.

Preview

See code

Lighted

Different state.

Preview

See code

Ghost

The opposite color.

Preview

See code

Rounded

You can completely round the corners of any type of Button with the rounded property.

Preview

See code

Scale

Buttons of different sizes.

Preview

See code

With Icons

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

Preview

See code

APIs

Button.Props

Attribute	Description	Type	Accepted values	Default
type	button type	`ButtonTypes`	ButtonTypes	`default`
ghost	the opposite color	`boolean`	-	`false`
rounded	rounded button	`boolean`	-	`false`
loading	display loading indicator	`boolean`	-	`false`
shadow	display shadow	`boolean`	-	`false`
auto	autoscale width	`boolean`	-	`false`
effect	display animation	`boolean`	-	`true`
disabled	disable button	`boolean`	-	`false`
onClick	click handler	`MouseEventHandler`	-	-
icon	show icon in button	`ReactNode`	-	-
iconRight	show icon on the other side of the button	`ReactNode`	-	-
htmlType	native type of button element	`ButtonHTMLAttributes.type`	-	`button`
ref	forwardRef	`Ref<HTMLButtonElement \| null>`	-	-
...	native props	`ButtonHTMLAttributes`	`'id', 'className', ...`	-

ButtonTypes

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

Edit this page on GitHub

Breadcrumbs

Button Dropdown

MADE & DESIGNED WITHBY BRUNO ANDRADE