---
title: Button
description: 'Button is used primarily for actions, such as “Continue”, “Apply”, or “Pay”.'
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/button
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/button.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/button.md#props)
* [Best practices](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/button.md#best-practices)
* [Related components](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/button.md#related-components)

# Button

Button is used primarily for actions, such as "Continue", "Apply", or "Pay".

### Example

![button](https://shopify.dev/assets/assets/images/api/checkout-extensions/post-purchase/components/button-B8xVuFfR.png)

##### JS

```ts
import {extend, Button} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const button = root.createComponent(
    Button,
    {
      // eslint-disable-next-line no-console
      onPress: () => console.log('Pressed!'),
    },
    'Press me',
  );

  root.appendChild(button);
});
```

##### React

```tsx
import {render, useExtensionApi, Button} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  const {extensionPoint} = useExtensionApi();

  return (
    <Button
      onPress={() => {
        // eslint-disable-next-line no-console
        console.log(`Extension point: ${extensionPoint}`);
      }}
    >
      Log extension point to console
    </Button>
  );
}
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| submit? | `boolean` | Allows the button to submit a form |
| to? | `string` | Destination to link to, renders a Link |
| subdued? | `boolean` | Renders a visually subdued button |
| plain? | `boolean` | Renders a button that visually looks like a Link |
| loading? | `boolean` | Replaces content with a loading indicator |
| loadingLabel? | `string` | Accessible label for the loading indicator when user prefers reduced motion |
| disabled? | `boolean` | Disables the button, disallowing any interaction |
| onPress? | `() => void` | Callback when pressed |

***

## Best practices

* Button labels should be clear so customers can predict what the results of interacting with a button will be.
* Use primary buttons for actions that will progress the customer through checkout, such as "Continue to shipping", and "Pay now".
* Use secondary buttons for actions that you want to draw attention to, but are not primary, such as "Track your order".
* Use plain buttons when you want the appearance of a text link, but the hit area of a button. Works well alongside other buttons to create hierarchies such as "Continue" and "Return to cart".

***

## Related components

* [ButtonGroup](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/buttongroup): A button group controls the layout for two or more stacked buttons such as "Continue" and "Return to cart", and adds the necessary spacing between them.
* [Link](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/link): Link makes text interactive so customers can perform an action, such as navigating to another location.

***

* [Props](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/button.md#props)
* [Best practices](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/button.md#best-practices)
* [Related components](https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/button.md#related-components)