Button

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

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

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

ButtonProps

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.

appearance

Specify the color treatment of the Button.

submit

Allows the button to submit a form.

to

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

inlineAlignment

Specifies the inline alignment of the content.

loading

Replaces content with a loading indicator.

loadingLabel

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

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.

accessibilityRole

The role of the button that will be rendered. `button`: renders a regular button. `submit`: renders a button that submits a form.

disabled

Disables the button, disallowing any interaction.

onPress

Callback that is run when the button is pressed.

overlay

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

toggles

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

id

A unique identifier for the component.

Appearance

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

InlineAlignment

'start' | 'center' | 'end'

ButtonAccessibilityRole

'button' | 'submit'

Related

• Link