Button

Used to trigger an operation.

General

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.

Type Colors

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

Lighted

Different state.

Ghost

The opposite color.

Rounded

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

Scale

Buttons of different sizes.

With Icons

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

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