Button

Buttons are user interface elements that initiates actions. This is their primary function and it is this function that makes them very different from links particularly on the web.


Props

Button properties

PropertyDescriptionTypeDefaultVersion
backgroundColorSets the background color of the buttonstring-
blockAllow button take full width of the parent elementbooleanfalse
colorSets the color of the buttonstring-
dangerUse if call-to-action is irreversible or destructivebooleanfalse
disabledSet disabled state so buttons look inactive and cannot be interacted with.booleanfalse
loadingSet the loading status of the buttonbooleanfalse
onClickCallback fired when a button is clicked.(event) => void-
pillSet shape of button to pill-shaped.booleanfalse
sizeHow large should the button be?large medium smallmedium
variantWhat variant of the button is to be used?primary secondary ghostprimary

Usage

Variant

Size

Disabled

Danger

Pill

Block

Background color

Color