---
title: Clickable chip
description: >-
  The clickable chip component displays interactive labels or categories that
  users can click or remove. Use clickable chip to show filter tags, selected
  options, or merchant-created labels that users need to interact with or
  dismiss.


  Clickable chips support multiple visual variants, optional icons, and can
  function as both clickable buttons and removable tags for flexible interaction
  patterns. For non-interactive labels, use
  [chip](/docs/api/checkout-ui-extensions/2026-01/web-components/typography-and-content/chip).
api_version: 2026-01
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable-chip
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/actions/clickable-chip.md
---

# Clickable chip

The clickable chip component displays interactive labels or categories that users can click or remove. Use clickable chip to show filter tags, selected options, or merchant-created labels that users need to interact with or dismiss.

Clickable chips support multiple visual variants, optional icons, and can function as both clickable buttons and removable tags for flexible interaction patterns. For non-interactive labels, use [chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/web-components/typography-and-content/chip).

### Support Targets (29)

### Supported targets

* purchase.​checkout.​actions.​render-before
* purchase.​checkout.​block.​render
* purchase.​checkout.​cart-line-item.​render-after
* purchase.​checkout.​cart-line-list.​render-after
* purchase.​checkout.​contact.​render-after
* purchase.​checkout.​delivery-address.​render-after
* purchase.​checkout.​delivery-address.​render-before
* purchase.​checkout.​footer.​render-after
* purchase.​checkout.​header.​render-after
* purchase.​checkout.​payment-method-list.​render-after
* purchase.​checkout.​payment-method-list.​render-before
* purchase.​checkout.​pickup-location-list.​render-after
* purchase.​checkout.​pickup-location-list.​render-before
* purchase.​checkout.​pickup-location-option-item.​render-after
* purchase.​checkout.​pickup-point-list.​render-after
* purchase.​checkout.​pickup-point-list.​render-before
* purchase.​checkout.​reductions.​render-after
* purchase.​checkout.​reductions.​render-before
* purchase.​checkout.​shipping-option-item.​details.​render
* purchase.​checkout.​shipping-option-item.​render-after
* purchase.​checkout.​shipping-option-list.​render-after
* purchase.​checkout.​shipping-option-list.​render-before
* purchase.​thank-you.​announcement.​render
* purchase.​thank-you.​block.​render
* purchase.​thank-you.​cart-line-item.​render-after
* purchase.​thank-you.​cart-line-list.​render-after
* purchase.​thank-you.​customer-information.​render-after
* purchase.​thank-you.​footer.​render-after
* purchase.​thank-you.​header.​render-after

## 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/latest/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/latest/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://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2026-01/clickable-chip-default.png)

### Examples

* #### Code

  ##### Default

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