Button

Button is used primarily for actions, such as “Continue”, “Apply”, or “Pay”.


Example

button

Props

optional = ?

Name Type Description
submit? boolean Allows the button to submit a form
to? string Destination to link to, renders a Link
subdued? boolean Renders a visually subdued button
plain? boolean Renders a button that visually looks like a Link
loading? boolean Replaces content with a loading indicator
loadingLabel? string Accessible label for the loading indicator when user prefers reduced motion
disabled? boolean Disables the button, disallowing any interaction
onPress? () => void Callback when pressed

Best practices

  • Button labels should be clear so customers can predict what the results of interacting with a button will be.
  • Use primary buttons for actions that will progress the customer through checkout, such as "Continue to shipping", and "Pay now".
  • Use secondary buttons for actions that you want to draw attention to, but are not primary, such as ”Track your order”.
  • Use plain buttons when you want the appearance of a text link, but the hit area of a button. Works well alongside other buttons to create hierarchies such as “Continue” and “Return to cart”.
  • ButtonGroup: A button group controls the layout for two or more stacked buttons such as “Continue” and “Return to cart”, and adds the necessary spacing between them.
  • Link: Link makes text interactive so customers can perform an action, such as navigating to another location.