---
title: Clickable
description: A generic interactive container component that makes any content interactive and accessible via taps.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsactions/clickable
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsactions/clickable.md
---

# Clickable

A generic interactive container component that makes any content interactive and accessible via taps.

## Properties

* disabled

  boolean

  Disables the clickable, meaning it cannot be clicked or receive focus.

  In this state, onClick will not fire. If the click event originates from a child element, the event will immediately stop propagating from this element.

  However, items within the clickable can still receive focus and be interacted with.

  This has no impact on the visual state by default, but developers are encouraged to style the clickable accordingly.

* id

  string

  A unique identifier for the element.

## Events

* click

  (event: CallbackEvent<"s-clickable">) => void

  Callback when the element is activated.

### CallbackEvent

* bubbles

  ```ts
  boolean
  ```

* cancelable

  ```ts
  boolean
  ```

* composed

  ```ts
  boolean
  ```

* currentTarget

  ```ts
  HTMLElementTagNameMap[T]
  ```

* detail

  ```ts
  any
  ```

* eventPhase

  ```ts
  number
  ```

* target

  ```ts
  HTMLElementTagNameMap[T] | null
  ```

```ts
interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}
```

### Examples

* #### Code

  ##### Default

  ```html
  <s-clickable onClick={handleShippingSettings}>
    <s-box padding="base">
      <s-text>View shipping settings</s-text>
    </s-box>
  </s-clickable>
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2025-10/clickable-default.png)