---
title: PressButton
description: Allows users to toggle between active/inactive states. Use to represent a persistent on/off or selected/unselected status.
api_version: 2026-01
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/actions/pressbutton
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/actions/pressbutton.md
---

# Press​Button

Allows users to toggle between active/inactive states. Use to represent a persistent on/off or selected/unselected status.

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

* **defaultPressed**

  **boolean**

  **Default: false**

  Whether the button is pressed by default.

* **disabled**

  **boolean**

  **Default: false**

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

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

* **lang**

  **string**

  Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)

* **loading**

  **boolean**

  **Default: false**

  Replaces 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

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

* **blur**

  **CallbackEventListener\<typeof tagName>**

  Callback when the button has lost focus.

* **click**

  **CallbackEventListener\<typeof tagName>**

  Callback when the button is activated.

* **focus**

  **CallbackEventListener\<typeof tagName>**

  Callback when the button has received focus.

### 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/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/press-button-default-yf8gSi0z.png)

### Examples

* #### Code

  ##### Default

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