Skip to main content

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.

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

Anchor to propertiesProperties

Anchor to accessibilityLabel
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.

Anchor to disabled
disabled
boolean
Default: false

Disables the chip, disallowing any interaction.

Anchor to hidden
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.

Anchor to href
href
string

The URL to link to.

  • If set, it will navigate to the location specified by href after executing the click event.
Anchor to id
id
string

A unique identifier for the element.

Anchor to removable
removable
boolean
Default: false

Whether the chip is removable.

Anchor to eventsEvents

Learn more about registering events.

Anchor to afterhide
afterhide
<typeof tagName>

Event handler when the chip has fully hidden.

The hidden property will be true when this event fires.

Anchor to click
click
<typeof tagName>

Event handler when the chip is clicked.

Anchor to remove
remove
<typeof tagName>

Event handler when the chip is removed.

Anchor to slotsSlots

Learn more about component slots.

Anchor to graphic
graphic
HTMLElement

The graphic to display inside of the chip.

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

Examples
<s-clickable-chip removable>Shipping insurance</s-clickable-chip>

Preview

Was this page helpful?