---
title: Pressable
description: Pressable wraps components to add interactivity with rendering a UI element.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/pressable
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/pressable.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/pressable.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/pressable.md#guidelines)

# Pressable

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

Pressable wraps components to add interactivity with rendering a UI element. Wrap small UI elements in Pressable to perform actions that don’t fit Button or Link.

##### JavaScript

```ts
import {extend, Pressable, Text} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const pressable = root.createComponent(Pressable, {
    onPress: () => console.log('I’ve been pressed!'),
  });

  const pressableText = root.createComponent(Text);
  pressableText.appendChild('I can be pressed');

  pressable.appendChild(pressableText);
  root.appendChild(pressable);

  root.mount();
});
```

##### React

```tsx
import React from 'react';
import {extend, render, Pressable} from '@shopify/admin-ui-extensions-react';

function App() {
  return <Pressable onPress={() => console.log('I’ve been pressed!')}>I can be pressed</Pressable>;
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| onPress | `() => void` | Callback for the pressable. |

***

## Guidelines

* 📱 All children of Pressables are placed in a single view object, which makes recycling the views expensive. Consider keeping your Pressable simple.

* 📱 Do not nest Layouts within Pressable. This will result in unintended behavior

* Do not nest other Action components (Button, Link) within Pressable. This will result in unexpected behavior.

  * 📱 A child of Pressable with `onPress` will take precedence and not call Pressable's `onPress`
  * 🖥 Both the child of Pressable with `onPress` and Pressable's `onPress` will activate if the child is pressed.

| ✅ Do | 🛑 Don't |
| - | - |
| 📱 Keep Pressable shallow. Complex hierarchies have performance penalties | Wrap Button or Link |
| Wrap small UI elements in Pressable to perform actions that don’t fit Button or Link. | Wrap Layout components |

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/pressable.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/pressable.md#guidelines)