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
<Button>Add product</Button>
Name
Type
Description
children
string
The content to display inside the button
url
string
A destination to link to, rendered in the href attribute of a link
primary
boolean
Provides extra visual weight and identifies the primary action in a set of buttons
destructive
boolean
Indicates a dangerous or potentially negative action
disabled
boolean
Disables the button, disallowing merchant interactiion
loading
boolean
Replaces button text with a spinner while a background action is being performed
size
enum
Changes the size of the button, giving it more or less padding
outline
boolean
Gives the button a subtle alternative to the default button styling, appropriate for certain backdrops
fullWidth
boolean
Allows the button to grow to the width of its container
disclosure
boolean
Displays the button with a disclosure icon
submit
boolean
Allows the button to submit a form
plain
boolean
Renders a button that looks like a link
external
boolean
Forces url to open in a new tab
icon
SVG
Icon to display to the left of the button content
accessibilityLabel
string
Visually hidden text for screen readers
onClick
function()
Callback when clicked
onFocus
function()
Callback when button becomes focussed
onBlur
function()
Callback when focus leaves button

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

An action needs to be completed by a merchant.

Solution

The button component can be used to help merchants find and complete actions across Shopify.


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