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

## 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;
}
```

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

## Preview

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

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