Button

Buttons make common actions immediately visible and easy to perform with one click or tap. They can be used for any type of action, including navigation.

Examples

Used most in the interface. Only use another style if a button requires more or less visual weight.

Drag to resize example

Props

accessibilityLabel
string
Visually hidden text for screen readers
ariaControls
string
Id of the element the button controls
ariaExpanded
boolean
Tells screen reader the controlled element is expanded
children
string
The content to display inside the button
destructive
boolean
Indicates a dangerous or potentially negative action
disabled
boolean
Disables the button, disallowing merchant interaction
disclosure
boolean
Displays the button with a disclosure icon
external
boolean
Forces url to open in a new tab
fullWidth
boolean
Allows the button to grow to the width of its container
icon
SVGSource | "placeholder" | "add" | "alert" | "arrowDown" | "arrowLeft" | "arrowRight" | "arrowUp" | "arrowUpDown" | "calendar" | "cancel" | "cancelSmall" | "caretDown" | "caretUp" | "checkmark" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "circleCancel" | "circleChevronDown" | "circleChevronLeft" | "circleChevronRight" | "circleChevronUp" | "circlePlus" | "conversation" | "delete" | "disable" | "dispute" | "duplicate" | "embed" | "export" | "external" | "help" | "horizontalDots" | "import" | "notes" | "notification" | "print" | "refresh" | "risk" | "save" | "search" | "subtract" | "view"
Icon to display to the left of the button content
id
string
A unique identifier for the button
loading
boolean
Replaces button text with a spinner while a background action is being performed
outline
boolean
Gives the button a subtle alternative to the default button styling, appropriate for certain backdrops
plain
boolean
Renders a button that looks like a link
primary
boolean
Provides extra visual weight and identifies the primary action in a set of buttons
size
"slim" | "large"
Changes the size of the button, giving it more or less padding
submit
boolean
Allows the button to submit a form
url
string
A destination to link to, rendered in the href attribute of a link
onBlur
() => void
Callback when focus leaves button
onClick
() => void
Callback when clicked
onFocus
() => void
Callback when button becomes focussed

Best practices

Buttons should:

  • Be clearly and accurately labeled.
  • Lead with strong, actionable verbs.
  • Use established button colors appropriately. For example, only use a red button for an action that’s difficult or impossible to undo.
  • Prioritize the most important actions. Too many calls to action can cause confusion and make merchants unsure of what to do next.
  • Be positioned in consistent locations in the interface.

Content guidelines

Buttons should be clear and predictable—merchants should be able to anticipate what will happen when they click a button. Never deceive a merchant by mislabeling a button.

  • Create order

  • Buy shipping label

  • New order

  • Buy

Buttons should always lead with a strong verb that encourages action. To provide enough context to merchants use the {verb}+{noun} format on buttons except in the case of common actions like Save, Close, Cancel, or OK.

  • Activate Apple Pay

  • View shipping settings

  • Try Apple Pay

  • View your settings

Buttons should be scannable—avoid unnecessary words and articles such as the, an, or a.

  • Add menu item

  • Add a menu item