# Button

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

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

```

## ButtonProps

### ButtonProps

### accessibilityLabel

value: `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.

### accessibilityRole

value: `ButtonAccessibilityRole`

The role of the button that will be rendered.

`button`: renders a regular button.

`submit`: renders a button that submits a form.

### activateAction

value: `'auto' | 'copy'`

Sets the action the `activateTarget` should take when this pressable is activated.

Supported actions by component:

| Component     | Supported Actions | Default ('auto')  |
|---------------|-------------------|-------------------|
| [`ClipboardItem`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/clipboarditem) | 'copy'            | 'copy'            |

### activateTarget

value: `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.

### appearance

value: `Extract<Appearance, 'monochrome' | 'critical'>`

Specify the color treatment of the Button.

### disabled

value: `boolean`

Disables the button, disallowing any interaction.

### id

value: `string`

A unique identifier for the component.

### inlineAlignment

value: `InlineAlignment`

Specifies the inline alignment of the content.

### kind

value: `'primary' | 'secondary' | 'plain'`

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

value: `boolean`

Replaces content with a loading indicator.

### loadingLabel

value: `string`

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

### onPress

value: `() => void`

Callback that is run when the button is pressed.

### overlay

value: `RemoteFragment`

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

### submit

value: `boolean`

Allows the button to submit a form.

### to

value: `string`

Destination URL to link to.

### toggles

value: `string`

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

## Related

- [Link](link)