Choose a version:

Button

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

Anchor to buttonpropsButtonProps

Anchor to kind kind "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.
Anchor to appearance appearance Extract<, 'monochrome' | 'critical'>: Specify the color treatment of the Button.
Anchor to to to string: Destination URL to link to. If this value is set, the button will render as a Link.
Anchor to inlineAlignment inlineAlignment Default: 'center': Specifies the inline alignment of the content.
Anchor to loading loading boolean Default: false: Replaces content with a loading indicator.
Anchor to loadingLabel loadingLabel string: Accessible label for the loading indicator when user prefers reduced motion. This value is only used if loading is true.
Anchor to accessibilityLabel accessibilityLabel 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.
Anchor to accessibilityRole accessibilityRole Default: 'button': The role of the button that will be rendered.

button: renders a regular button.

submit: renders a button that submits a form.
Anchor to disabled disabled boolean Default: false: Disables the button, disallowing any interaction.
Anchor to onPress onPress () => void: Callback that is run when the button is pressed.
Anchor to overlay overlay RemoteFragment: An overlay component to render when the user interacts with the component.
Anchor to toggles toggles string: The component's identifier whose visibility will be toggled when this component is actioned.
Anchor to id id string: A unique identifier for the component.
Anchor to submit submit boolean: Allows the button to submit a form.

Deprecated
use accessibilityRole="submit" instead

ButtonProps

kind
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.
```
"primary" | "secondary" | "plain"
```
appearance
Specify the color treatment of the Button.
```
Extract<Appearance, 'monochrome' | 'critical'>
```
submit
Allows the button to submit a form.
```
boolean
```
to
Destination URL to link to. If this value is set, the button will render as a Link.
```
string
```
inlineAlignment
Specifies the inline alignment of the content.
```
InlineAlignment
```
loading
Replaces content with a loading indicator.
```
boolean
```
loadingLabel
Accessible label for the loading indicator when user prefers reduced motion. This value is only used if `loading` is true.
```
string
```
accessibilityLabel
A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.
```
string
```
accessibilityRole
The role of the button that will be rendered. `button`: renders a regular button. `submit`: renders a button that submits a form.
```
ButtonAccessibilityRole
```
disabled
Disables the button, disallowing any interaction.
```
boolean
```
onPress
Callback that is run when the button is pressed.
```
() => void
```
overlay
An overlay component to render when the user interacts with the component.
```
RemoteFragment
```
toggles
The component's identifier whose visibility will be toggled when this component is actioned.
```
string
```
id
A unique identifier for the component.
```
string
```

export interface ButtonProps
  extends OverlayActivatorProps,
    DisclosureActivatorProps,
    IdProps {
  /**
   * 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.
   *
   *
   * @defaultValue 'primary'
   */
  kind?: 'primary' | 'secondary' | 'plain';
  /**
   * Specify the color treatment of the Button.
   */
  appearance?: Extract<Appearance, 'monochrome' | 'critical'>;
  /**
   * Allows the button to submit a form.
   * @deprecated use `accessibilityRole="submit"` instead
   */
  submit?: boolean;
  /**
   * Destination URL to link to. If this value is set, the button will render as a Link.
   */
  to?: string;
  /**
   * Specifies the inline alignment of the content.
   *
   * @defaultValue 'center'
   */
  inlineAlignment?: InlineAlignment;
  /**
   * Replaces content with a loading indicator.
   *
   * @defaultValue false
   */
  loading?: boolean;
  /**
   * Accessible label for the loading indicator when user prefers reduced motion. This value is
   * only used if `loading` is true.
   */
  loadingLabel?: 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.
   */
  accessibilityLabel?: string;
  /**
   * The role of the button that will be rendered.
   *
   * `button`: renders a regular button.
   *
   * `submit`: renders a button that submits a form.
   *
   * @defaultValue 'button'
   */
  accessibilityRole?: ButtonAccessibilityRole;
  /**
   * Disables the button, disallowing any interaction.
   *
   * @defaultValue false
   */
  disabled?: boolean;
  /**
   * Callback that is run when the button is pressed.
   */
  onPress?(): void;
}

Appearance

'accent' | 'interactive' | 'subdued' | 'info' | 'success' | 'warning' | 'critical' | 'monochrome'

InlineAlignment

'start' | 'center' | 'end'

ButtonAccessibilityRole

'button' | 'submit'

Was this section helpful?

Basic Button

import {render, Button} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => <Extension />);

function Extension() {

return (

<Button

onPress={() => {

console.log('onPress event');

}}

Pay now

</Button>

);

}

examples

Basic Button

React

import {render, Button} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => <Extension />);

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

JS

import {extend, Button} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::Render', (root) => {
  const button = root.createComponent(
    Button,
    {onPress: () => console.log('onPress event')},
    'Pay now',
  );

  root.appendChild(button);
});

Preview

Anchor to appearanceAppearance

Value	Description
`"critical"`	Conveys a problem has arisen.
`"monochrome"`	Takes the color of its parent.

Was this section helpful?

Anchor to best-practicesBest Practices

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?

Anchor to relatedRelated

ComponentLink