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

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.

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' |

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.

appearance

Specify the color treatment of the Button.

disabled

Disables the button, disallowing any interaction.

id

A unique identifier for the component.

inlineAlignment

Specifies the inline alignment of the content.

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.

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.

onPress

Callback that is run when the button is pressed.

overlay

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

submit

Allows the button to submit a form.

to

Destination URL to link to.

toggles

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

ButtonAccessibilityRole

'button' | 'submit'

Appearance

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

InlineAlignment

'start' | 'center' | 'end'

Related

• Link