---
title: Clickable
description: >-
  The `Clickable` component makes any content interactive. Use it to add click
  interactions to non-interactive elements while maintaining full control over
  their visual presentation.


  Unlike the
  [`Button`](/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/button)
  component, `Clickable` doesn't impose visual styling, allowing you to create
  custom interactive elements. You must implement focus indicators and other
  visual cues yourself.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/actions/clickable
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/actions/clickable.md
---

# Clickable

The `Clickable` component makes any content interactive. Use it to add click interactions to non-interactive elements while maintaining full control over their visual presentation.

Unlike the [`Button`](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/polaris-web-components/actions/button) component, `Clickable` doesn't impose visual styling, allowing you to create custom interactive elements. You must implement focus indicators and other visual cues yourself.

Support

Targets (9)

### Supported targets

* [pos.​cart.​line-item-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/cart-details#cart-details-action-modal-)
* [pos.​customer-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/customer-details#customer-details-action-modal-)
* [pos.​draft-order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/draft-order-details#draft-order-details-action-modal-)
* [pos.​exchange.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-exchange#post-exchange-action-modal-)
* [pos.​home.​modal.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/home-screen#home-screen-action-modal-)
* [pos.​order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/order-details#order-details-action-modal-)
* [pos.​product-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/product-details#product-details-action-modal-)
* [pos.​purchase.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-purchase#post-purchase-action-modal-)
* [pos.​return.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-return#post-return-action-modal-)

#### Use cases

* **Interactive cards:** Create custom cards that respond to clicks without button styling.
* **Clickable elements:** Make text, images, or icons clickable while preserving visual appearance.
* **Complex layouts:** Build interactive layouts with multiple clickable regions.
* **Custom interfaces:** Implement selection interfaces, galleries, or navigation with tailored designs.

## Examples

### Make content clickable

Make any content interactive using a `Clickable` component wrapper without imposing visual styling. This example shows how to create custom interactive elements while maintaining full control over appearance.

## Make content clickable

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

### Examples

* #### Make content clickable

  ##### Description

  Make any content interactive using a \`Clickable\` component wrapper without imposing visual styling. This example shows how to create custom interactive elements while maintaining full control over appearance.

  ##### Default

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

## Properties

Configure the following properties on the `Clickable` component.

* disabled

  boolean

  Whether the field is disabled, preventing user interaction. Use when the field is temporarily unavailable due to application state, permissions, or dependencies.

* id

  string

  A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.

## Events

The `Clickable` component provides event callbacks for handling user interactions. Learn more about [handling events](https://shopify.dev/docs/api/polaris/using-polaris-web-components#handling-events).

* click

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

  The callback when the element is activated.

### CallbackEvent

Represents the event object passed to callback functions when interactive events occur. Contains metadata about the event, including the target element, event phase, and propagation behavior.

* bubbles

  Whether the event bubbles up through the DOM tree.

  ```ts
  boolean
  ```

* cancelable

  Whether the event can be canceled.

  ```ts
  boolean
  ```

* composed

  Whether the event will trigger listeners outside of a shadow root.

  ```ts
  boolean
  ```

* currentTarget

  The element that the event listener is attached to.

  ```ts
  HTMLElementTagNameMap[T]
  ```

* detail

  Additional data associated with the event.

  ```ts
  any
  ```

* eventPhase

  The current phase of the event flow.

  ```ts
  number
  ```

* target

  The element that triggered the event.

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

```ts
interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  /**
   * The element that the event listener is attached to.
   */
  currentTarget: HTMLElementTagNameMap[T];
  /**
   * Whether the event bubbles up through the DOM tree.
   */
  bubbles?: boolean;
  /**
   * Whether the event can be canceled.
   */
  cancelable?: boolean;
  /**
   * Whether the event will trigger listeners outside of a shadow root.
   */
  composed?: boolean;
  /**
   * Additional data associated with the event.
   */
  detail?: any;
  /**
   * The current phase of the event flow.
   */
  eventPhase: number;
  /**
   * The element that triggered the event.
   */
  target: HTMLElementTagNameMap[T] | null;
}
```

## Best practices

* **Implement visual feedback:** Since `Clickable` has no built-in styling, add focus indicators and active states to show interactivity.
* **Wrap non-interactive elements:** Use `Clickable` for text, images, or icons. Avoid wrapping components with built-in interactions.
* **Handle disabled state carefully:** When `disabled`, child elements can still receive focus. Provide visual feedback for the non-interactive state.

## Limitations

The component doesn't automatically provide keyboard navigation support beyond basic click functionality.