Pressable

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to 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.

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

});

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 />),

);

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

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 />),
);

Anchor to PropsProps

optional = ?

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

Anchor to GuidelinesGuidelines

📱 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

Was this page helpful?