---
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: 2025-10
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

* afterhide

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Event handler when the chip has fully hidden.

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

* click

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Event handler when the chip is clicked.

* remove

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Event handler when the chip is removed.

### CallbackEventListener

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

### CallbackEvent

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

## Slots

* graphic

  HTMLElement

  The graphic to display inside of the chip.

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

### Examples

* #### Code

  ##### Default

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

## Preview

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