---
title: Press button
description: >-
  The press button component lets users toggle between active and inactive
  states. Use press button for persistent on/off or selected/unselected choices.
api_version: 2026-07
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/web-components/actions/press-button
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/web-components/actions/press-button.md
api_name: customer-account-ui-extensions
---

# Press button

The press button component lets users toggle between active and inactive states. Use press button for persistent on/off or selected/unselected choices.

Press buttons provide visual feedback for pressed and unpressed states. For binary controls that take effect immediately without a save action, use [switch](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/web-components/forms/switch) instead.

Press button supports binary toggle state only — pressed or unpressed. Multi-state or tri-state toggles aren't supported.

### Support Targets (24)

### Supported targets

* [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/footer#footer-render-after-)
* [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-actions#order-index-announcement-)
* [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-actions#order-index-block-)
* [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-status#order-status-announcement-)
* [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-status#order-status-block-)
* [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/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/2026-07-rc/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/2026-07-rc/targets/order-status#customer-information-render-after-)
* [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/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/2026-07-rc/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/2026-07-rc/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-actions#order-action-menu-item-)
* [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/order-actions#order-action-)
* [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/full-page#order-specific-full-page-)
* [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/full-page#customer-account-full-page-)
* [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-default#profile-announcement-)
* [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/targets/profile-page-default#profile-block-)
* [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/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/2026-07-rc/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/2026-07-rc/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/2026-07-rc/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.​profile.​payment.​render-after

#### Use cases

* **Preference toggles**: Let customers toggle preferences such as marketing opt-in or communication settings.
* **Subscription controls**: Let customers toggle subscription settings like auto-renewal or delivery pause.
* **Feature toggles**: Enable or disable optional features like order notifications or delivery instructions.
* **Default selections**: Pre-select recommended options using `defaultPressed` so customers start with a suggested choice.

***

## Properties

Configure the following properties on the press button component.

* **accessibilityLabel**

  **string**

  A label that describes the purpose or content of the button for users of assistive technologies such as screen readers. Use this when the visible content alone doesn't provide enough context.

* **defaultPressed**

  **boolean**

  **Default: false**

  Whether the button is pressed by default.

* **disabled**

  **boolean**

  **Default: false**

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

* **id**

  **string**

  A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

* **inlineSize**

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

  **Default: 'auto'**

  The inline width of the button component.

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

* **lang**

  **string**

  The language of the button's text content. Use this when the button text is in a different language than the rest of the page, so assistive technologies can invoke the correct pronunciation. See the [reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) (`Subtag` label).

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

* **pressed**

  **boolean**

  **Default: false**

  Whether the button is pressed.

### Events

The press button component provides event callbacks for handling user interactions. Learn more about [handling events](https://shopify.dev/docs/api/polaris/using-polaris-web-components#handling-events).

* **blur**

  **CallbackEventListener\<typeof tagName>**

  A callback fired when the button loses focus.

  Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).

* **click**

  **CallbackEventListener\<typeof tagName>**

  A callback fired when the button is clicked.

  Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).

* **focus**

  **CallbackEventListener\<typeof tagName>**

  A callback fired when the button receives focus.

  Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).

### CallbackEventListener

A typed event listener for custom element events. The listener receives a \`CallbackEvent\` with the correct \`currentTarget\` type for the associated custom element tag.

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

### CallbackEvent

An event type that narrows the \`currentTarget\` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

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

***

## Examples

### Toggle optional selections

Let customers toggle optional add-ons with a press button. This example shows an `s-press-button` element for gift wrapping.

## Toggle optional selections

![A toggle button labeled Add gift wrapping that can be pressed to select an option.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/press-button-default-yf8gSi0z.png)

## html

```html
<s-press-button>Add gift wrapping</s-press-button>
```

### Pre-select an option

Start an option in its selected state on first load. This example uses an `s-press-button` with the `pressed` attribute for an email notification preference that the user can toggle off.

## html

```html
<s-press-button pressed>Email notifications</s-press-button>
```

### Disable an unavailable option

Show a toggle in a non-interactive state when the option isn't available. This example displays an `s-press-button` with the `disabled` attribute for an unavailable shipping method.

## html

```html
<s-press-button disabled>Express shipping</s-press-button>
```

***

## Best practices

* **Write clear toggle labels**: Use text that describes the option being toggled, such as "Enable paperless billing" rather than "Toggle" or "On/Off."
* **Pre-select recommended options**: Use `defaultPressed` when an option is commonly chosen, so users start with the recommended selection.
* **Disable rather than hide**: When an option is temporarily unavailable, use the `disabled` attribute to keep it visible and set expectations.
* **Use for binary choices only**: Press button represents on/off states. For multi-option selections, use [choice list](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-07-rc/web-components/forms/choice-list) instead.

***