Migrate Pressable to the Polaris clickable component

The Polaris clickable component wraps content to make it interactive and clickable without the default styling that comes with button or link. It replaces the previous <Pressable> component and is available as <s-clickable> in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

The following properties are different in the Polaris clickable component.

Anchor to onPressonPress

The previous Pressable onPress prop now uses the standard click event handler.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

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

function Extension() {
  return (
    <s-clickable onClick={() => console.log('Clicked')}>
      Click me
    </s-clickable>
  );
}

import {
  reactExtension,
  Pressable,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <Pressable onPress={() => console.log('Clicked')}>
      Click me
    </Pressable>
  );
}

Anchor to toto

The previous Pressable to prop is now called href.

target defaults to 'auto', which automatically opens external links in a new window so customers stay on the current page — no extra code needed. Set target="_blank" only when you want to force an internal link to open in a new window.

Anchor to accessibilityRoleaccessibilityRole

The previous Pressable accessibilityRole prop is now called type.

Use the same values, such as button and submit.

Anchor to togglestoggles

The previous Pressable toggles prop was used to expand or collapse content in Disclosure. In Polaris, use command="--toggle" with commandFor for behavior-only toggling. If you want the disclosure UI (chevron, text treatment, layout), use <s-details> with <s-summary> instead.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

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

function Extension() {
  return (
    <>
      <s-clickable command="--toggle" commandFor="details-content">
        Show details
      </s-clickable>
      <s-details id="details-content">
        <s-text>Product details</s-text>
      </s-details>
    </>
  );
}

import {
  Disclosure,
  Pressable,
  Text,
  View,
  reactExtension,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <Disclosure>
      <Pressable toggles="details-content">
        <Text>Show details</Text>
      </Pressable>
      <View id="details-content">
        <Text>Product details</Text>
      </View>
    </Disclosure>
  );
}

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

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

function Extension() {
  return (
    <s-details>
      <s-summary>Show details</s-summary>
      <s-text>Product details</s-text>
    </s-details>
  );
}

import {
  Disclosure,
  Pressable,
  Text,
  View,
  reactExtension,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <Disclosure>
      <Pressable toggles="details-content">
        <Text>Show details</Text>
      </Pressable>
      <View id="details-content">
        <Text>Product details</Text>
      </View>
    </Disclosure>
  );
}

Anchor to SizesSizes

The size properties accept updated values in the Polaris clickable component. Previous unitless number values map to pixels. For example, 300 is now '300px'.

Anchor to Removed propertiesRemoved properties

The following properties aren't supported:

• onPointerDown
• onPointerEnter
• onPointerLeave
• onPointerUp
• opacity

Anchor to blockAlignmentblockAlignment

The Polaris clickable component no longer supports blockAlignment directly. To align the clickable's children on the cross axis, wrap the children in stack and use alignItems on the stack.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

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

function Extension() {
  return (
    <s-clickable onClick={() => console.log('Delivery details')}>
      <s-stack alignItems="center">
        <s-text>Express shipping</s-text>
        <s-text>Next business day</s-text>
      </s-stack>
    </s-clickable>
  );
}

import {
  reactExtension,
  Pressable,
  Text,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <Pressable
      blockAlignment="center"
      onPress={() => console.log('Delivery details')}
    >
      <Text>Express shipping</Text>
      <Text>Next business day</Text>
    </Pressable>
  );
}

Anchor to inlineAlignmentinlineAlignment

The Polaris clickable component no longer supports inlineAlignment directly. To align the clickable's children on the main axis, wrap the children in stack and use justifyContent on the stack.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

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

function Extension() {
  return (
    <s-clickable onClick={() => console.log('Next step')}>
      <s-stack justifyContent="end">
        <s-text>Next step</s-text>
      </s-stack>
    </s-clickable>
  );
}

import {
  reactExtension,
  Pressable,
  Text,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <Pressable
      inlineAlignment="end"
      onPress={() => console.log('Next step')}
    >
      <Text>Next step</Text>
    </Pressable>
  );
}

Anchor to overlayoverlay

The Polaris clickable component no longer supports overlay directly. E.g. to open a modal, use commandFor with command. To close the modal, use command="--hide" with commandFor. If you need to close the modal programmatically, use hideOverlay().

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

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

function Extension() {
  return (
    <>
      <s-clickable command="--show" commandFor="details-modal">
        <s-text>More info</s-text>
      </s-clickable>
      <s-modal id="details-modal" heading="Details">
        <s-text>Delivery in 2 to 4 business days.</s-text>
        <s-button command="--hide" commandFor="details-modal">
          Close
        </s-button>
      </s-modal>
    </>
  );
}

import {
  Button,
  Modal,
  Pressable,
  Text,
  reactExtension,
  useApi,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  const {ui} = useApi();

  return (
    <Pressable
      overlay={
        <Modal id="details-modal" title="Details">
          <Text>Delivery in 2 to 4 business days.</Text>
          <Button onPress={() => ui.overlay.close('details-modal')}>
            Close
          </Button>
        </Modal>
      }
    >
      <Text>More info</Text>
    </Pressable>
  );
}

Anchor to New propertiesNew properties

The Polaris clickable component introduces the following new properties: