Components

Button

Design
Code

Let users perform a single, clearly expressed action.

We have a wide variety of button sizes, styles and types, all designed for specific contexts.

Web
React Native
Android
Apple
Other
<Button
  type="primary"
  size="medium"
>
  Send This Playlist
</Button>

Props

buttonType

oneOf
string

Determines the button’s HTML button type. Read more on the MDN site.

  • button (default)
  • reset
  • submit

type

oneOf
string

Determines what type appears on the button.

  • primary (default)
  • secondary
  • destroy
  • confirm
  • subtle
  • cancel

style

oneOf
string

Determines the button style.

  • standard (default)
  • minimal

size

oneOf
string

Determines the button’s size.

  • small
  • medium (default)
  • large

collapsePadding

oneOf
string

Collapses side padding of minimal buttons for better alignment.

  • left
  • right
  • horizontal

status

oneOf
string

Adds a status indicator to the button.

  • spinning - Adds a spinner next to the text.
  • success - Makes the button green and adds a checkmark next to the text.
  • failure - Makes the button red and adds an X next to the text.

icon

element
string

Adds an icon element to the button. You can either pass an Icon element or just the name of the icon.

text

string

The text that appears on the button. Can also be passed in as children of the component.

disabled

bool

Adds a disabled attribute if true.

onClick

func

Responds to the button click event.

buttonRef

func

A ref passed to the native button element.

qaId

string

A unique string to control this button in automated tests.

Notes

  • If you include an icon but no text, your button is automatically styled as icon-only.