---
title: ClickableChip
description: Interactive button used to categorize or highlight content attributes. They are often displayed near the content they classify, enhancing discoverability by allowing users to identify items with similar properties.
api_version: 2026-01
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/actions/clickablechip
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/actions/clickablechip.md
---

# Clickable​Chip

Interactive button used to categorize or highlight content attributes. They are often displayed near the content they classify, enhancing discoverability by allowing users to identify items with similar properties.

## Properties

* **accessibilityLabel**

  **string**

  A label that describes the purpose or contents of the Chip. It will be read to users using assistive technologies such as screen readers.

* **disabled**

  **boolean**

  **Default: false**

  Disables the chip, disallowing any interaction.

* **hidden**

  **boolean**

  **Default: false**

  Determines whether the chip is hidden.

  If this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires.

  If the chip is not `removable`, it can still be hidden by setting this property.

* **href**

  **string**

  The URL to link to.

  * If set, it will navigate to the location specified by `href` after executing the `click` event.

* **id**

  **string**

  A unique identifier for the element.

* **removable**

  **boolean**

  **Default: false**

  Whether the chip is removable.

## Events

Learn more about [registering events](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/using-polaris-components#event-handling).

* **afterhide**

  **CallbackEventListener\<typeof tagName>**

  Event handler when the chip has fully hidden.

  The `hidden` property will be `true` when this event fires.

* **click**

  **CallbackEventListener\<typeof tagName>**

  Event handler when the chip is clicked.

* **remove**

  **CallbackEventListener\<typeof tagName>**

  Event handler when the chip is removed.

### CallbackEventListener

```ts
(EventListener & {
    (event: CallbackEvent<TTagName, Event> & TData): void;
}) | null
```

### CallbackEvent

```ts
TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}
```

## Slots

Learn more about [component slots](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/using-polaris-components#slots).

* **graphic**

  **HTMLElement**

  The graphic to display inside of the chip.

  Only `s-icon` element and its `type` attribute are supported.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/clickable-chip-default-Dw9lcFp4.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-clickable-chip removable>Shipping insurance</s-clickable-chip>
  ```