Choose a version:

Button

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

Anchor to buttonpropsButtonProps

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 activateAction activateAction 'auto' | 'copy' Default: 'auto' - a default action for the target component.: Sets the action the activateTarget should take when this pressable is activated.

Supported actions by component:

Component Supported Actions Default ('auto')
ClipboardItem 'copy' 'copy'
Anchor to activateTarget activateTarget string: ID of a component that should respond to activations (e.g. clicks) on this pressable.

See activateAction for how to control the behavior of the target.
Anchor to appearance appearance Extract<, 'monochrome' | 'critical'>: Specify the color treatment of the Button.
Anchor to disabled disabled boolean Default: false: Disables the button, disallowing any interaction.
Anchor to id id string: A unique identifier for the component.
Anchor to inlineAlignment inlineAlignment Default: 'center': Specifies the inline alignment of the content.
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 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 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 to to string: Destination URL to link to.
Anchor to toggles toggles string: The component's identifier whose visibility will be toggled when this component is actioned.
Anchor to submit submit boolean: Allows the button to submit a form.

Deprecated
use accessibilityRole="submit" instead

Component	Supported Actions	Default ('auto')
`ClipboardItem`	'copy'	'copy'

ButtonProps

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
```
activateAction
Sets the action the `activateTarget` should take when this pressable is activated. Supported actions by component: | Component | Supported Actions | Default ('auto') | |---------------|-------------------|-------------------| | [`ClipboardItem`](/docs/api/checkout-ui-extensions/latest/clipboarditem) | 'copy' | 'copy' |
```
'auto' | 'copy'
```
activateTarget
ID of a component that should respond to activations (e.g. clicks) on this pressable. See `activateAction` for how to control the behavior of the target.
```
string
```
appearance
Specify the color treatment of the Button.
```
Extract<Appearance, 'monochrome' | 'critical'>
```
disabled
Disables the button, disallowing any interaction.
```
boolean
```
id
A unique identifier for the component.
```
string
```
inlineAlignment
Specifies the inline alignment of the content.
```
InlineAlignment
```
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'
```
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
```
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
```
submit
Allows the button to submit a form.
```
boolean
```
to
Destination URL to link to.
```
string
```
toggles
The component's identifier whose visibility will be toggled when this component is actioned.
```
string
```

export interface ButtonProps
  extends OverlayActivatorProps,
    DisclosureActivatorProps,
    InteractionProps,
    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.
   */
  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;
}

ButtonAccessibilityRole

'button' | 'submit'

Appearance

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

InlineAlignment

'start' | 'center' | 'end'

Was this section helpful?

Basic Button

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>

);

}

examples

Basic Button

React

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>
  );
}

JS

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

export default extension('purchase.checkout.block.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