Button

Renders a button tag. This module exposes two types of buttons <TextButton /> and <Button />. Take a look to the MDN web docs - Button to know more about some of the default props supported by a button along with some accessibility concerns.

The purpose of the buttons is to trigger an interaction like order, confirmation or submit. For navigation targets consider a link. Use the primary button only once per screen and avoid putting two primary buttons next to each other. Use the secondary button for less important actions and in multi button scenarios.

Properties

NameTypeDefault
variant

"primary" | "secondary" | "danger"

Define style of the button component, defaults to primary
"primary"
size

"medium" | "small"

Adjusts the size of the button
"medium"
block

boolean

Sets the button width to 100% of the parent
-
inverted

boolean

Adjust colors for display on a dark background
-

The Button supports margin and width styled-system props.

The TextButton supports margin and width styled-system props.

Examples

Icons

Sometimes an icon can help clarify the usage of the button.

The recommended sizes for the icons:

  • <IconName size={20} /> — 20px for regular button
  • <IconName size={18} /> — 18px for small button

Combinations

variant="primary"

size="medium"

variant="primary"

size="medium"

inverted

variant="primary"

size="small"

variant="primary"

size="small"

inverted

variant="secondary"

size="medium"

variant="secondary"

size="medium"

inverted

variant="secondary"

size="small"

variant="secondary"

size="small"

inverted

variant="danger"

size="medium"

variant="danger"

size="medium"

inverted

variant="danger"

size="small"

variant="danger"

size="small"

inverted