---
title: Button
description: 'Buttons are used for actions, such as “Add”, “Continue”, “Pay now”, or “Save”.'
api_version: 2024-10
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/actions/button
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/actions/button.md
---

# Button

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

## ButtonProps

* accessibilityLabel

  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

  ButtonAccessibilityRole

  Default: 'button'

  The role of the button that will be rendered.

  `button`: renders a regular button.

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

* appearance

  Extract\<Appearance, 'monochrome' | 'critical'>

  Specify the color treatment of the Button.

* disabled

  boolean

  Default: false

  Disables the button, disallowing any interaction.

* id

  string

  A unique identifier for the component.

* inlineAlignment

  InlineAlignment

  Default: 'center'

  Specifies the inline alignment of the content.

* kind

  'primary' | 'secondary' | 'plain'

  Default: 'primary'

  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

  boolean

  Default: false

  Replaces content with a loading indicator.

* loadingLabel

  string

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

* onPress

  () => void

  Callback that is run when the button is pressed.

* overlay

  RemoteFragment

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

* to

  string

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

* toggles

  string

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

* submit

  boolean

  deprecated

  Allows the button to submit a form.

  Deprecated

  use `accessibilityRole="submit"` instead

### ButtonAccessibilityRole

```ts
'button' | 'submit'
```

### Appearance

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

### InlineAlignment

```ts
'start' | 'center' | 'end'
```

### Examples

* #### Basic Button

  ##### React

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

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

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2024-10/button-default.png)

## Appearance

| Value | Description |
| - | - |
| `"critical"` | Conveys a problem has arisen. |
| `"monochrome"` | Takes the color of its parent. |

## Best Practices

**Content Best Practices**

* Clearly label each button to accurately represent the action associated with it.

* Use strong actionable verbs at the beginning of button text to make it clear to the user what action will occur when the button is clicked.

**Hierarchy Best Practices**

* Establish a visual hierarchy between buttons to minimize confusion and help users understand which actions are most important.

* Use only one high-emphasis button (primary button) per context to make it clear that other buttons have less importance.

* Use lower-emphasis buttons for secondary calls to action.

* Use primary buttons for actions that progress users through checkout such as “Pay now” or for concluding an action in a modal such as “Apply”.

* Use secondary buttons to provide alternative actions to the primary button, without disrupting the primary flow such as “Track your order”.

* Use plain buttons for least prominent, non-critical actions such as “Login to your account”.

**When to Use Buttons**

* Use buttons to communicate actions the user can take.

* Use buttons to allow users to interact with the page.

**When Not to Use Buttons**

* Don’t use buttons as navigational elements. Use links instead when the desired action is to take the user to a new page.

## Related

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/actions/link)

[ComponentLink](https://shopify.dev/docs/api/checkout-ui-extensions/2024-10/components/actions/link)