---
title: Button
description: >-
  The button component triggers actions or events, such as submitting forms,
  opening dialogs, or navigating to other pages. Use buttons to let users
  perform specific tasks or initiate interactions.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/button
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/actions/button.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.

# Button

The button component triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages. Use buttons to let users perform specific tasks or initiate interactions throughout the interface.

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-)
* [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-)
* [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-)
* [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Primary actions**: Let customers take key actions like "Save changes," "Reorder," or "Apply" on their account pages.
* **Secondary actions**: Provide supporting actions such as "Cancel," "Edit address," or "Track order" alongside a primary action.
* **Loading states**: Display loading indicators during operations like saving profile changes while preventing duplicate submissions.
* **Link-style navigation**: Navigate to external pages or resources using a button with the `to` prop when a more prominent affordance than an inline link is needed.

***

## Properties

Configure the following properties on the Button component.

* **accessibilityLabel**

  **string**

  A label that describes the purpose or content of the button for users of assistive technologies such as screen readers. When set, any `children` supplied to this component won't 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.

* **activateAction**

  **'auto' | 'copy'**

  **Default: 'auto' - a default action for the target component.**

  Sets the action the `activateTarget` should take when this component 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**

  **string**

  The ID of the component to control when this component is activated. Pair with the `activateAction` property to specify what action to perform on the target component.

* **appearance**

  **'critical' | 'monochrome'**

  The semantic meaning and color treatment of the button, such as `'critical'` for destructive actions or `'monochrome'` for a neutral appearance.

* **disabled**

  **boolean**

  **Default: false**

  Whether the button is disabled, preventing it from being activated or receiving focus.

* **id**

  **string**

  A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.

* **inlineAlignment**

  **InlineAlignment**

  **Default: 'center'**

  Specifies the inline alignment of the content.

* **kind**

  **'primary' | 'secondary' | 'plain'**

  **Default: 'primary'**

  The visual style variant of the button, which controls its prominence and emphasis. The visual presentation is controlled through the Branding API.

  * `'primary'`: High-emphasis style for main actions, such as "Continue to next step."
  * `'secondary'`: Medium-emphasis style for secondary actions that don't block user progress, such as "Download Shop app."
  * `'plain'`: Renders the button with a link-like appearance.

* **loading**

  **boolean**

  **Default: false**

  Whether the button is in a loading state, which replaces the button content with a loading indicator while a background action is being performed. This also disables the button.

* **loadingLabel**

  **string**

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

* **onPress**

  **() => void**

  A callback fired when the button is activated by the user.

* **overlay**

  **RemoteFragment**

  An overlay component to render when the user interacts with the component, such as a popover, modal, or tooltip.

* **to**

  **string**

  The URL to navigate to when the button is activated. The `onPress` callback fires first, then navigation occurs.

* **toggles**

  **string**

  The ID of the component whose visibility will be toggled when this component is activated. Use this to show or hide related content like a disclosure panel.

* **submit**

  **boolean**

  **deprecated**

  Whether the button submits the nearest containing form when activated.

  **Deprecated:**

  Use `accessibilityRole="submit"` instead.

### ButtonAccessibilityRole

The accessibility role for button-like components. - \`button\`: A generic button that triggers an action. - \`submit\`: A button that submits a form.

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

### InlineAlignment

Controls how content is aligned along the inline axis (horizontal in standard writing modes). - \`'start'\`: Aligns content to the inline start of the container. - \`'center'\`: Centers content along the inline axis. - \`'end'\`: Aligns content to the inline end of the container.

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

***

## Examples

### Add primary and secondary buttons

Create a button that triggers an action when pressed. This example shows a primary button with an `onPress` handler.

## Add primary and secondary buttons

![A primary button labeled Reorder](https://shopify.dev/assets/assets/images/templated-apis-screenshots/customer-account-ui-extensions/2025-07/button-default-t_S2ai2Z.png)

## Add primary and secondary buttons

##### React

```tsx
import {
  reactExtension,
  Button,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Button
      onPress={() => {
        console.log('onPress event');
      }}
    >
      Pay now
    </Button>
  );
}
```

##### JS

```js
import {extension, Button} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const button = root.createComponent(
    Button,
    {onPress: () => console.log('onPress event')},
    'Pay now',
  );

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

### Show a loading state

Prevent duplicate submissions by showing a loading indicator while an operation completes. This example displays buttons with the `loading` prop across primary and secondary variants.

## Show a loading state

##### React

```tsx
import {
  reactExtension,
  Button,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <>
      <Button loading kind="primary">
        Saving...
      </Button>
      <Button loading kind="secondary">
        Applying...
      </Button>
    </>
  );
}
```

##### JS

```js
import {extension, Button} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const savingButton = root.createComponent(
    Button,
    {loading: true, kind: 'primary'},
    'Saving...',
  );

  const applyingButton = root.createComponent(
    Button,
    {loading: true, kind: 'secondary'},
    'Applying...',
  );

  root.appendChild(savingButton);
  root.appendChild(applyingButton);
});
```

### Open an external page

Navigate to an external page by using the `to` prop on a button. This example renders a button that links to an external URL.

## Open an external page

##### React

```tsx
import {
  reactExtension,
  Button,
} from '@shopify/ui-extensions-react/customer-account';

export default reactExtension(
  'customer-account.page.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Button to="https://www.shopify.com">
      Visit our store
    </Button>
  );
}
```

##### JS

```js
import {extension, Button} from '@shopify/ui-extensions/customer-account';

export default extension('customer-account.page.render', (root) => {
  const button = root.createComponent(
    Button,
    {to: 'https://www.shopify.com'},
    'Visit our store',
  );

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

***

## Best practices

* **Write action-oriented text**: Clearly label each button to accurately represent the action. Use strong action verbs at the beginning of button text, such as "Add," "Save," or "Apply."
* **Choose appropriate emphasis**: Use only one high-emphasis button (primary) per context. Use lower-emphasis buttons for secondary calls to action.
* **Use primary buttons for key actions**: Reserve primary buttons for the most important action in a given flow, such as "Save" or "Apply." Use secondary buttons for alternatives like "Track your order."

***

## Limitations

* Buttons don't support custom widths. They size to their content or fill their container based on the layout.
* When `to` is set, the button behaves as a link. Press event handlers are ignored.

***