Button

Change anything and watch the Button follow, then find every property it takes below.

FreeReact and Vue

Intent

Variant

Size

Corners16px

Properties#

Appearance4

variant

The level of emphasis.

primarysecondarytertiaryDefaultprimary

intent

The colour, matched to what the action does.

brandneutralsuccesswarningerrorinverseOnDarkDefaultbrand

size

Height, padding, radius and type size together.

xxsxssmmdlgxlDefaultlg

pill

Fully rounded ends.

booleanDefaultfalse

Content7

iconOnly

A square button with one icon. Needs aria-label.

booleanDefaultfalse

leftIcon

Show the icon before the label.

booleanDefaulttrue

rightIcon

Show the icon after the label.

booleanDefaulttrue

swapLeftIcon

Replace the left icon.

ReactNode

swapRightIcon

Replace the right icon.

ReactNode

swapSoloIcon

Replace the icon of an icon-only button.

ReactNode

children

The label.

ReactNode

Behaviour2

loading

Shows a spinner, sets aria-busy and disables the button.

booleanDefaultfalse

disabled

Inert and removed from the tab order.

booleanDefaultfalse