IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
FormsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Button

/

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
IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Button API and examples.
<Button
  buttonType="primary"
  size="medium"
>
  Send This Playlist
</Button>

Props

Visual


buttonStyle

   REQUIRED

string

Determines the button style.

  • standard (default)
  • minimal

buttonType

   REQUIRED

string

Determines what type appears on the button.

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

children

ReactNode

Displays as the label of the button.

className

string

A class to apply to the main button element.

collapsePadding

string

Collapses side padding of minimal buttons for better alignment.

  • left
  • right
  • horizontal

environment

string

Determines the environment applied.

  • light (default)
  • dark

icon

ReactNode

Adds an icon element to the button. You can either pass an Icon component or your own icon element.

iconAlignment

string

Determines what side of the label the icon displays.

  • left (default)
  • right

isBlock

boolean

Determines whether or not the width fills 100% of the button’s container.

isDisabled

boolean

Determines whether the button is disabled.

size

string

Determines the button’s size.

  • xsmall
  • small
  • medium (default)
  • large

status

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.

overflowStyle

string

Determines whether to truncate text that overflows the width of the button with an ellipsis or to wrap it to another line with a hyphen.

  • ellipsis
  • wrap (default)

Events


onClick

(e?) => void

Responds to the button click event.

Miscellaneous


qaId

string

A unique string to target the button in automated tests.

...props

You can pass in any of the other props from an HTML button element.

Notes

  • If you include an icon but no text, your button is automatically styled as icon-only.
  • A button may be wrapped in a link when the call-to-action takes the user elsewhere. Work with your designer to decide the best approach.

Accessibility

Audit Results

See our full accessibility audit for more information about these results.

VisualInteractiveAutomatedDetails
IconConfirmation PassIconConfirmation PassIconWarning Warning
  • IconWarningCSS outline property is used unexpectedly. (Stylelint)