# 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

### 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.

### appearance

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

Specify the color treatment of the Button.

### submit

value: `boolean`

Allows the button to submit a form.

### to

value: `string`

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

### inlineAlignment

value: `InlineAlignment`

Specifies the inline alignment of the content.

### 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.

### 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.

### disabled

value: `boolean`

Disables the button, disallowing any interaction.

### 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.

### toggles

value: `string`

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

### id

value: `string`

A unique identifier for the component.

## Related

- [Link](link)