---
title: Migrate Pressable to the Polaris clickable component
description: >-
  Learn how to migrate the Clickable (Pressable) 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/pressable
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/pressable.md
---

# 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`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/button) or [`link`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/link). It replaces the previous [`<Pressable>`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/actions/pressable) component and is available as [`<s-clickable>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable) in API versions 2025-10 and newer.

***

## Updated properties

The following properties are different in the Polaris clickable component.

### on​Press

The previous `Pressable` `onPress` prop now uses the standard [`click`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#events-propertydetail-click) event handler.

## Migrating \`onPress\` to \`onClick\`

##### Latest (Preact)

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

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

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

### to

The previous `Pressable` `to` prop is now called [`href`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-href).

[`target`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-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.

### accessibility​Role

The previous `Pressable` `accessibilityRole` prop is now called [`type`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-type).

Use the same values, such as `button` and `submit`.

### toggles

The previous `Pressable` `toggles` prop was used to expand or collapse content in `Disclosure`. In Polaris, use [`command="--toggle"`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-command) with [`commandFor`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-commandfor) for behavior-only toggling. If you want the disclosure UI (chevron, text treatment, layout), use [`<s-details>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/typography-and-content/details) with `<s-summary>` instead.

| Previous value | New pattern |
| - | - |
| `toggles="<id>"` (behavior only) | Use `command="--toggle"` with `commandFor="<id>"` on `<s-clickable>` and target the element you want to show or hide. |
| `toggles="<id>"` (with disclosure UI) | Use `<s-details>` with `<s-summary>` and place the expandable content inside. |

## Migrating toggles to command and commandFor

##### Latest (Preact)

```tsx
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>
    </>
  );
}
```

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

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

## Migrating toggles to s-details (disclosure UI)

##### Latest (Preact)

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

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

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

### Sizes

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

| Property | Previous values | New values | Migration notes |
| - | - | - | - |
| `maxInlineSize` | `number` \| `` `${number}%` `` \| `'fill'` | `` `${number}px` `` \| `` `${number}%` `` \| `'0'` \| `'none'` | `fill` is removed. Use `100%` instead. |
| `minInlineSize` | `number` \| `` `${number}%` `` \| `'fill'` | `` `${number}px` `` \| `` `${number}%` `` \| `'0'` | `fill` is removed. Use `100%` instead. |
| `maxBlockSize` | `number` \| `` `${number}%` `` \| `'fill'` | `` `${number}px` `` \| `` `${number}%` `` \| `'0'` \| `'none'` | `fill` is removed. Use `100%` instead. |
| `minBlockSize` | `number` \| `` `${number}%` `` \| `'fill'` | `` `${number}px` `` \| `` `${number}%` `` \| `'0'` | `fill` is removed. Use `100%` instead. |

**Responsive values:**

If you used `Style.default().when()` to make this property responsive, container queries replace the `Style` helper. Wrap your content in `<s-query-container>` and use `@container` syntax in the property value. Learn more in [Migrate StyleHelper to container queries](https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/style-helper).

***

## Removed properties

The following properties aren't supported:

* `onPointerDown`
* `onPointerEnter`
* `onPointerLeave`
* `onPointerUp`
* `opacity`

### block​Alignment

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`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-alignitems) on the stack.

## Migrating blockAlignment to alignItems

##### Latest (Preact)

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

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

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

### inline​Alignment

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`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/layout-and-structure/stack#properties-propertydetail-justifycontent) on the stack.

## Migrating inlineAlignment to justifyContent

##### Latest (Preact)

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

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

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

### overlay

The Polaris clickable component no longer supports `overlay` directly. E.g. to open a modal, use [`commandFor`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-commandfor) with [`command`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-command). To close the modal, use `command="--hide"` with `commandFor`. If you need to close the modal programmatically, use [`hideOverlay()`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/overlays/modal#methods-propertydetail-hideoverlay).

## Migrating overlay to commandFor

##### Latest (Preact)

```tsx
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>
    </>
  );
}
```

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

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

***

## New properties

The Polaris clickable component introduces the following new properties:

| New prop | Type | Description |
| - | - | - |
| [`command`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-command) | `'--auto'`, `'--toggle'`, `'--copy'`, `'--show'`, `'--hide'` | Sets the action to run when the clickable is activated. |
| [`commandFor`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-commandfor) | `string` | Sets the ID of the target component for the command. |
| [`interestFor`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-interestfor) | `string` | Sets the ID of the component that should respond to hover and focus. |
| [`target`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-target) | `'auto'`, `'_blank'` | Controls where a linked URL opens. |
| [`accessibilityVisibility`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-accessibilityvisibility) | `'visible'`, `'hidden'`, `'exclusive'` | Controls whether the element is visible in the accessibility tree. |
| [`lang`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable#properties-propertydetail-lang) | `string` | Sets the language of the element content. |

***