---
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 throughout the interface.


  Buttons support various visual styles, tones, and interaction patterns to
  communicate intent and hierarchy. They can also function as links, guiding
  users to internal or external destinations. For navigation-focused
  interactions within text, use
  [link](/docs/api/customer-account-ui-extensions/2026-01/web-components/actions/link).
  For grouping multiple related buttons, use [button
  group](/docs/api/customer-account-ui-extensions/2026-01/web-components/actions/button-group).
api_version: 2026-01
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/actions/button
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/actions/button.md
---

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

Buttons support various visual styles, tones, and interaction patterns to communicate intent and hierarchy. They can also function as links, guiding users to internal or external destinations. For navigation-focused interactions within text, use [link](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/actions/link). For grouping multiple related buttons, use [button group](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/actions/button-group).

### Support Targets (24)

### Supported targets

* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## Properties

* **accessibilityLabel**

  **string**

  A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.

  Use this when using only an icon or the Button text is not enough context for users using assistive technologies.

* **command**

  **'--auto' | '--show' | '--hide' | '--toggle' | '--copy'**

  **Default: '--auto'**

  Sets the action the `commandFor` should take when this clickable is activated.

  See the documentation of particular components for the actions they support.

  * `--auto`: a default action for the target component.
  * `--show`: shows the target component.
  * `--hide`: hides the target component.
  * `--toggle`: toggles the target component.
  * `--copy`: copies the target ClipboardItem.

* **commandFor**

  **string**

  ID of a component that should respond to activations (e.g. clicks) on this component.

  See `command` for how to control the behavior of the target.

* **disabled**

  **boolean**

  **Default: false**

  Disables the Button meaning it cannot be clicked or receive focus.

* **href**

  **string**

  The URL to link to.

  * If set, it will navigate to the location specified by `href` after executing the `click` event.
  * If a `commandFor` is set, the `command` will be executed instead of the navigation.

* **id**

  **string**

  A unique identifier for the element.

* **inlineSize**

  **'auto' | 'fill' | 'fit-content'**

  **Default: 'auto'**

  The displayed inline width of the Button.

  * `auto`: the size of the button depends on the surface and context.
  * `fill`: the button will takes up 100% of the available inline size.
  * `fit-content`: the button will take up the minimum inline-size required to fit its content.

* **interestFor**

  **string**

  ID of a component that should respond to interest (e.g. hover and focus) on this component.

* **loading**

  **boolean**

  **Default: false**

  Replaces content with a loading indicator while a background action is being performed.

  This also disables the Button.

* **target**

  **'auto' | '\_blank'**

  **Default: 'auto'**

  Specifies where to display the linked URL.

* **tone**

  **'auto' | 'neutral' | 'critical'**

  **Default: 'auto'**

  Sets the tone of the Button based on the intention of the information being conveyed.

* **type**

  **'submit' | 'button'**

  **Default: 'button'**

  The behavior of the Button.

  * `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.
  * `button`: Used to indicate the component acts as a button, meaning it has no default action.
  * `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).

  This property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.

* **variant**

  **'auto' | 'primary' | 'secondary'**

  **Default: 'auto' - the variant is automatically determined by the Button's context**

  Changes the visual appearance of the Button.

## Events

Learn more about [registering events](https://shopify.dev/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).

* **click**

  **CallbackEventListener\<typeof tagName>**

  Callback when the button is activated. This will be called before the action indicated by `type`.

### CallbackEventListener

```ts
(EventListener & {
    (event: CallbackEvent<TTagName, Event> & TData): void;
}) | null
```

### CallbackEvent

```ts
TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}
```

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2026-04/button-default-BNP27v3f.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-button variant="secondary">Cancel</s-button>
  <s-button variant="primary">Save</s-button>
  ```

## Best Practices

**Content Best Practices**

* Clearly label each button with what it does. Users should be able to predict the result of clicking the button.
* Start button text with a strong action verb that describes the action (e.g., "Add", "Save", "Apply").

**Hierarchy Best Practices**

* Create a clear visual hierarchy by varying the emphasis level of the buttons.
* There should only be one high emphasis (primary) button per area. All the other buttons should be lower emphasis.
* Use primary buttons for the most important action in a given flow (e.g. "Pay now", "Apply").
* Use secondary buttons for alternative actions (e.g. "Track your order").

**When to Use**

* Use buttons when you want the user to take an action.
* Use buttons when you need a way to explicitly control user interaction (e.g. form submissions or toggle states).

**When not to Use**

* Don't use buttons for navigation. Use links instead.