Choose a version:

Pressable

Use this component when you need to capture click or press events on its child elements without adding any additional visual styling. It subtly enhances user interaction by changing the cursor when hovering over the child elements, providing a clear indication of interactivity.

Anchor to pressablepropsPressableProps

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. When set, any children or label supplied will not be announced to screen readers.
Anchor to accessibilityRole accessibilityRole Default: 'generic': Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.
Anchor to blockSize blockSize number | `${number}%`: Adjust the block size.

number: size in pixels.

`${number}%`: size in percentages of the available space.
Anchor to display display 'auto' | 'none' Default: 'auto': The display property sets the display behavior of an element.
Anchor to href href string: The URL to link to. If set, it will navigate to the location specified by href after executing the onClick callback.
Anchor to id id string: A unique identifier for the link.
Anchor to inlineSize inlineSize number | `${number}%`: Adjust the inline size.

number: size in pixels.

`${number}%`: size in percentages of the available space.
Anchor to lang lang string: Alias for language
Anchor to language language string: Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. Reference of values ("subtag" label)
Anchor to maxBlockSize maxBlockSize number | `${number}%`: Adjust the maximum block size.

number: size in pixels.

`${number}%`: size in percentages of the available space.
Anchor to maxInlineSize maxInlineSize number | `${number}%`: Adjust the maximum inline size.

number: size in pixels.

`${number}%`: size in percentages of the available space.
Anchor to minBlockSize minBlockSize number | `${number}%`: Adjust the minimum block size.

number: size in pixels.

`${number}%`: size in percentages of the available space.
Anchor to minInlineSize minInlineSize number | `${number}%`: Adjust the minimum inline size.

number: size in pixels.

`${number}%`: size in percentages of the available space.
Anchor to onClick onClick () => void: Callback when a link is pressed. If href is set, it will execute the callback and then navigate to the location specified by href.
Anchor to onPress onPress () => void: Alias for onClick Callback when a link is pressed. If href is set, it will execute the callback and then navigate to the location specified by href.
Anchor to padding padding < | boolean>: Adjust the padding.

To shorten the code, it is possible to specify all the padding for all edges of the box in one property.

base means block-start, inline-end, block-end and inline-start paddings are base.

base none means block-start and block-end paddings are base, inline-start and inline-end paddings are none.

base none large means block-start padding is base, inline-end padding is none, block-end padding is large and inline-start padding is none.

base none large small means block-start padding is base, inline-end padding is none, block-end padding is large and inline-start padding is small.

true applies a default padding that is appropriate for the component.

Learn more about the 1-to-4-value syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box
Anchor to paddingBlock paddingBlock < | boolean>: Adjust the block-padding.

base none means block-start padding is base, block-end padding is none.
Anchor to paddingBlockEnd paddingBlockEnd | boolean: Adjust the block-end padding.
Anchor to paddingBlockStart paddingBlockStart | boolean: Adjust the block-start padding.
Anchor to paddingInline paddingInline < | boolean>: Adjust the inline padding.

base none means inline-start padding is base, inline-end padding is none.
Anchor to paddingInlineEnd paddingInlineEnd | boolean: Adjust the inline-end padding.
Anchor to paddingInlineStart paddingInlineStart | boolean: Adjust the inline-start padding.
Anchor to target target '_blank' | '_self' Default: '_self': Specifies where to display the linked URL
Anchor to to to string: Alias for href If set, it will navigate to the location specified by to after executing the onClick callback.
Anchor to tone tone 'default' | 'inherit' | 'critical': Sets the link color.

inherit will take the color value from its parent, giving the link a monochrome appearance. In some cases, its important to pair this property with another stylistic treatment, like an underline, to differentiate the link from a normal text.

PressableProps

accessibilityLabel
A label that describes the purpose or contents of the element. When set, it will be announced to users using assistive technologies and will provide them with more context. When set, any children or `label` supplied will not be announced to screen readers.
```
string
```
accessibilityRole
Sets the semantic meaning of the component’s content. When set, the role will be used by assistive technologies to help users navigate the page.
```
AccessibilityRole
```
blockSize
Adjust the block size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.
```
number | `${number}%`
```
display
The display property sets the display behavior of an element.
```
'auto' | 'none'
```
href
The URL to link to. If set, it will navigate to the location specified by `href` after executing the `onClick` callback.
```
string
```
id
A unique identifier for the link.
```
string
```
inlineSize
Adjust the inline size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.
```
number | `${number}%`
```
lang
Alias for `language`
```
string
```
language
Indicate the text language. Useful when the text is in a different language than the rest of the page. It will allow assistive technologies such as screen readers to invoke the correct pronunciation. [Reference of values](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)
```
string
```
maxBlockSize
Adjust the maximum block size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.
```
number | `${number}%`
```
maxInlineSize
Adjust the maximum inline size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.
```
number | `${number}%`
```
minBlockSize
Adjust the minimum block size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.
```
number | `${number}%`
```
minInlineSize
Adjust the minimum inline size. - `number`: size in pixels. - `` `${number}%` ``: size in percentages of the available space.
```
number | `${number}%`
```
onClick
Callback when a link is pressed. If `href` is set, it will execute the callback and then navigate to the location specified by `href`.
```
() => void
```
onPress
Alias for `onClick` Callback when a link is pressed. If `href` is set, it will execute the callback and then navigate to the location specified by `href`.
```
() => void
```
padding
Adjust the padding. To shorten the code, it is possible to specify all the padding for all edges of the box in one property. - `base` means block-start, inline-end, block-end and inline-start paddings are `base`. - `base none` means block-start and block-end paddings are `base`, inline-start and inline-end paddings are `none`. - `base none large` means block-start padding is `base`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`. - `base none large small` means block-start padding is `base`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`. - `true` applies a default padding that is appropriate for the component. Learn more about the 1-to-4-value syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box
```
MaybeAllBoxEdgesShorthandProperty<SpacingKeyword | boolean>
```
paddingBlock
Adjust the block-padding. - `base none` means block-start padding is `base`, block-end padding is `none`.
```
MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>
```
paddingBlockEnd
Adjust the block-end padding.
```
SpacingKeyword | boolean
```
paddingBlockStart
Adjust the block-start padding.
```
SpacingKeyword | boolean
```
paddingInline
Adjust the inline padding. - `base none` means inline-start padding is `base`, inline-end padding is `none`.
```
MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>
```
paddingInlineEnd
Adjust the inline-end padding.
```
SpacingKeyword | boolean
```
paddingInlineStart
Adjust the inline-start padding.
```
SpacingKeyword | boolean
```
target
Specifies where to display the linked URL
```
'_blank' | '_self'
```
to
Alias for `href` If set, it will navigate to the location specified by `to` after executing the `onClick` callback.
```
string
```
tone
Sets the link color. - `inherit` will take the color value from its parent, giving the link a monochrome appearance. In some cases, its important to pair this property with another stylistic treatment, like an underline, to differentiate the link from a normal text.
```
'default' | 'inherit' | 'critical'
```

export interface PressableProps extends BoxProps, LinkProps {}

AccessibilityRole

'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic'

MaybeAllBoxEdgesShorthandProperty

T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`

SpacingKeyword

'none' | 'small' | 'base' | 'large'

MaybeTwoBoxEdgesShorthandProperty

T | `${T} ${T}`

Was this section helpful?

Simple pressable example

import {

reactExtension,

Icon,

InlineStack,

Pressable,

Text,

} from '@shopify/ui-extensions-react/admin';

reactExtension('Playground', () => <Extension />);

function Extension() {

return (

<Text>Go to Apps Dashboard</Text>

</InlineStack>

</Pressable>

);

}

examples

Simple pressable example

React

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

reactExtension('Playground', () => <Extension />);

function Extension() {
  return (
    <Pressable padding="base">
      <InlineStack>
        <Text>Go to Apps Dashboard</Text>
        <Icon name="AppsMajor" />
      </InlineStack>
    </Pressable>
  );
}

JS

import {
  extension,
  Icon,
  InlineStack,
  Pressable,
  Text,
} from '@shopify/ui-extensions/admin';

extension('Playground', (root) => {
  const pressable = root.createComponent(
    Pressable,
    {
      padding: 'base',
      onPress: () => console.log('onPress event'),
    },
    [
      root.createComponent(InlineStack, {}, [
        root.createComponent(Text, {}, 'Go to App Dashboard'),
        root.createComponent(Icon, {name: 'AppsMajor'}),
      ]),
    ],
  );

  root.appendChild(pressable);
});

Preview

Anchor to relatedRelated

Button