Choose a version:

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 (24)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the clickable chip component.

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, preventing all user interaction including clicks and removal. Disabled chips are visually dimmed to indicate they are not interactive.
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.

When using the removable variant, keep hidden synced with your app state. If hidden isn't updated after the chip is removed, the chip can become permanently hidden.
Anchor to href href string: The URL to link to. When set, the chip navigates to the specified location after the click event fires.
Anchor to id 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.
Anchor to removable removable boolean Default: false: Whether the chip displays a remove button, allowing users to dismiss it. When true, clicking the remove button fires the remove event.

Anchor to EventsEvents

The clickable chip component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to afterhide afterhide <typeof tagName>: A callback fired after the chip is hidden. The hidden property will be true when this event fires.
Anchor to click click <typeof tagName>: A callback fired when the chip is clicked.

Learn more about the click event.
Anchor to remove remove <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.

(EventListener & {
      (event: CallbackEvent<TTagName, TEvent>): 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.

TEvent & {
  currentTarget: HTMLElementTagNameMap[TTagName];
}

Anchor to SlotsSlots

The clickable chip component supports slots for additional content placement within the component. Learn more about using slots.

Anchor to graphic graphic HTMLElement: An optional graphic displayed at the start of the chip, such as an icon to visually reinforce the chip's label. Only the s-icon element and its type attribute are supported.

Anchor to ExamplesExamples

Anchor to Dismiss a selected optionDismiss a selected option

Show a removable chip that users can dismiss with a single tap. This example uses the removable attribute for a shipping insurance option.

Dismiss a selected option

A dismissable chip element displaying a selected filter option.

html

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

Anchor to Add an icon to a chipAdd an icon to a chip

Add an icon next to the chip label to reinforce its meaning. This example shows an s-clickable-chip with the graphic slot containing an s-icon, linked to a sale collection.

html

<s-clickable-chip>

<s-icon type="discount" slot="graphic"></s-icon>

On sale

</s-clickable-chip>

Anchor to Disable an unavailable optionDisable an unavailable option

Show a chip in a non-interactive state to indicate an unavailable option. This example displays an s-clickable-chip with the disabled attribute for a sold-out selection.

html

<s-clickable-chip disabled>Sold out</s-clickable-chip>

Anchor to Best practicesBest practices

Keep labels concise: Use single words or short phrases that clearly identify the option or filter.
Use removable for dismissible selections: Set the removable attribute when users should be able to remove the chip from a selection set.
Add icons for clarity: Use the graphic slot with s-icon to reinforce the chip's meaning, such as a discount icon for sale items.
Disable instead of hiding: When an option is temporarily unavailable, use the disabled attribute rather than removing the chip from the interface.

Was this page helpful?