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 component is <s-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 (controlled) and 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. This guide covers the standalone ToggleButton case.

Anchor to Updated propertiesUpdated properties

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

Anchor to onPressonPress

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.

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>
  );
}

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>
  );
}

Anchor to New propertiesNew properties

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