# 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.

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

```

## PressableProps

### PressableProps

### accessibilityRole

value: `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.

### blockSize

value: `number | `${number}%``

Adjust the block size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.

### minBlockSize

value: `number | `${number}%``

Adjust the minimum block size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.

### maxBlockSize

value: `number | `${number}%``

Adjust the maximum block size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.

### inlineSize

value: `number | `${number}%``

Adjust the inline size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.

### minInlineSize

value: `number | `${number}%``

Adjust the minimum inline size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.

### maxInlineSize

value: `number | `${number}%``

Adjust the maximum inline size.

- `number`: size in pixels.
- `` `${number}%` ``: size in percentages of the available space.

### padding

value: `MaybeAllBoxEdgesShorthandProperty<SpacingKeyword | 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

### paddingBlock

value: `MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>`

Adjust the block-padding.

- `base none` means block-start padding is `base`, block-end padding is `none`.

### paddingBlockStart

value: `boolean | SpacingKeyword`

Adjust the block-start padding.

### paddingBlockEnd

value: `boolean | SpacingKeyword`

Adjust the block-end padding.

### paddingInline

value: `MaybeTwoBoxEdgesShorthandProperty<SpacingKeyword | boolean>`

Adjust the inline padding.

- `base none` means inline-start padding is `base`, inline-end padding is `none`.

### paddingInlineStart

value: `boolean | SpacingKeyword`

Adjust the inline-start padding.

### paddingInlineEnd

value: `boolean | SpacingKeyword`

Adjust the inline-end padding.

### id

value: `string`

A unique identifier for the link.

### href

value: `string`

The URL to link to.
If set, it will navigate to the location specified by `href` after executing the `onClick` callback.

### to

value: `string`

Alias for `href`
If set, it will navigate to the location specified by `to` after executing the `onClick` callback.

### tone

value: `"default" | "critical" | "inherit"`

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.

### onClick

value: `() => 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`.

### onPress

value: `() => 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`.

### accessibilityLabel

value: `string`

A label used for users using assistive technologies. When set, any
`children` supplied to this component will not be announced to screen reader users.

### language

value: `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](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) ("subtag" label)

### lang

value: `string`

Alias for `language`

### target

value: `"_blank" | "_self"`

Specifies where to display the linked URL

## Related

- [Button](https://shopify.dev/docs/api/admin-extensions/components/actions/button)