---
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-04/web-components/typography-and-content/chip).
api_version: 2026-04
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-04/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. When set, the chip navigates to the specified location after the `click` event fires.

* **id**

  **string**

  A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

* **removable**

  **boolean**

  **Default: false**

  Whether the chip is removable.

## Events

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

* **afterhide**

  **CallbackEventListener\<typeof tagName>**

  A callback fired after the chip is hidden. The `hidden` property will be `true` when this event fires.

* **click**

  **CallbackEventListener\<typeof tagName>**

  A callback fired when the chip is clicked.

  Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).

* **remove**

  **CallbackEventListener\<typeof tagName>**

  A callback fired when the chip is removed.

### CallbackEventListener

A typed event listener for custom element events. The listener receives a \`CallbackEvent\` with the correct \`currentTarget\` type for the associated custom element tag.

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

### CallbackEvent

An event type that narrows the \`currentTarget\` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.

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

## Slots

Learn more about [component slots](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/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/development/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>
  ```