Button

Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”.

"primary" | "secondary" | "plain"
Default: 'primary'

The type of button that will be rendered. The visual presentation of the button type is controlled by merchants through the Branding API.

primary: button used for main actions. For example: "Continue to next step".

secondary: button used for secondary actions not blocking user progress. For example: "Download Shop app".

plain: renders a button that visually looks like a link.

Extract<
, 'monochrome' | 'critical'>

Specify the color treatment of the Button.

string

Destination URL to link to. If this value is set, the button will render as a Link.

Default: 'center'

Specifies the inline alignment of the content.

boolean
Default: false

Replaces content with a loading indicator.

string

Accessible label for the loading indicator when user prefers reduced motion. This value is only used if loading is true.

string

A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.

Default: 'button'

The role of the button that will be rendered.

button: renders a regular button.

submit: renders a button that submits a form.

boolean
Default: false

Disables the button, disallowing any interaction.

() => void

Callback that is run when the button is pressed.

RemoteFragment

An overlay component to render when the user interacts with the component.

string

The component's identifier whose visibility will be toggled when this component is actioned.

string

A unique identifier for the component.

boolean

Allows the button to submit a form.

Was this section helpful?
Basic Button
Copy
import {
reactExtension,
Button,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return (
<Button
onPress={() => {
console.log('onPress event');
}}
>
Pay now
</Button>
);
}

Preview
ValueDescription
"critical"Conveys a problem has arisen.
"monochrome"Takes the color of its parent.
Was this section helpful?

Content Best Practices

  • Clearly label each button to accurately represent the action associated with it.

  • Use strong actionable verbs at the beginning of button text to make it clear to the user what action will occur when the button is clicked.

Hierarchy Best Practices

  • Establish a visual hierarchy between buttons to minimize confusion and help users understand which actions are most important.

  • Use only one high-emphasis button (primary button) per context to make it clear that other buttons have less importance.

  • Use lower-emphasis buttons for secondary calls to action.

  • Use primary buttons for actions that progress users through checkout such as “Pay now” or for concluding an action in a modal such as “Apply”.

  • Use secondary buttons to provide alternative actions to the primary button, without disrupting the primary flow such as “Track your order”.

  • Use plain buttons for least prominent, non-critical actions such as “Login to your account”.

When to Use Buttons

  • Use buttons to communicate actions the user can take.

  • Use buttons to allow users to interact with the page.

When Not to Use Buttons

  • Don’t use buttons as navigational elements. Use links instead when the desired action is to take the user to a new page.
Was this section helpful?