---
title: Migrate ToggleButton to the Polaris press button component
description: >-
  Learn how to migrate the ToggleButton component to Polaris web components in
  checkout and customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/toggle-button
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/toggle-button.md
---

# Migrate ToggleButton to the Polaris press button component

The Polaris press button component renders a button with a built-in toggled (pressed) state. The closest replacement for the previous [`ToggleButton`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/forms/togglebutton) component is [`<s-press-button>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/press-button), available in API versions 2025-10 and newer.

This isn't a 1:1 migration. The previous standalone `ToggleButton` was a button with an `onPress` callback — it didn't carry its own pressed state, so apps tracked that state externally and re-rendered the label or styling themselves. `<s-press-button>` bakes the pressed state into the component through [`pressed`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/press-button#properties-propertydetail-pressed) (controlled) and [`defaultPressed`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/press-button#properties-propertydetail-defaultpressed) (uncontrolled), and exposes it to assistive technologies. You can still wire the same click handler you had before, but you'll usually drive `pressed` from the same state instead of relying on visual cues alone.

For the grouped pick-one use case (`ToggleButton` inside `ToggleButtonGroup`), see the [ToggleButtonGroup migration guide](https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/toggle-button-group). This guide covers the standalone `ToggleButton` case.

***

## Updated properties

The following property is different in the Polaris press button component.

### on​Press

The previous `ToggleButton` `onPress` callback has been replaced with the standard `click` event on `<s-press-button>`. Use `onClick` in Preact JSX to listen for it.

## Migrating ToggleButton to s-press-button

##### Latest (Preact)

```tsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState} from 'preact/hooks';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const [pressed, setPressed] = useState(false);

  return (
    <s-press-button
      pressed={pressed}
      onClick={() => setPressed(!pressed)}
    >
      {pressed ? 'Saved' : 'Save for later'}
    </s-press-button>
  );
}
```

##### Pre-Polaris (2025-07)

```tsx
import {useState} from 'react';
import {
  reactExtension,
  ToggleButton,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const [pressed, setPressed] = useState(false);

  return (
    <ToggleButton
      id="save-for-later"
      onPress={() => setPressed(!pressed)}
    >
      {pressed ? 'Saved' : 'Save for later'}
    </ToggleButton>
  );
}
```

***

## New properties

The Polaris press button component introduces the following new properties that weren't available on `ToggleButton`:

| New prop | Type | Description |
| - | - | - |
| [`pressed`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/press-button#properties-propertydetail-pressed) | `boolean` | Current pressed state. Use to drive the button from app state. |
| [`defaultPressed`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/press-button#properties-propertydetail-defaultpressed) | `boolean` | Initial pressed state for uncontrolled usage. |
| [`inlineSize`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/press-button#properties-propertydetail-inlinesize) | `'auto'` \| `'fill'` \| `'fit-content'` | Controls the width behavior of the button. |
| [`loading`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/press-button#properties-propertydetail-loading) | `boolean` | Shows a loading state while an action is in progress. |

***