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.

Anchor to PropertiesProperties

Configure the following properties on the clickable chip component.

Anchor to color color Default: 'base' required: The color emphasis level that controls visual intensity.
Anchor to accessibilityLabel accessibilityLabel string required: A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose.
Anchor to removable removable boolean Default: false required: Whether the chip displays a remove button for dismissal. When clicked, the remove callback fires.
Anchor to hidden hidden boolean Default: false required: Whether the chip is hidden from view. When using controlled component pattern with removable chips, update this property when the remove event fires. For non-removable chips, manually toggle this property to show or hide the chip.
Anchor to disabled disabled boolean Default: false required: Whether the chip is disabled, preventing any user interaction.
Anchor to href href string required: The URL to navigate to when clicked. The click event fires first, then navigation occurs. If commandFor is also set, the command executes instead of navigation.
Anchor to command command '--auto' | '--show' | '--hide' | '--toggle' Default: '--auto' required: The action that command should take when this component is activated.

--auto: A default action for the target component.

--show: Shows the target component.

--hide: Hides the target component.

--toggle: Toggles the visibility of the target component.
Anchor to commandFor commandFor string required: The component that commandFor should act on when this component is activated.
Anchor to interestFor interestFor string required: The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information.

ColorKeyword

Defines the color intensity or emphasis level for text and UI elements. - `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements. - `base`: Primary color for body text, standard UI elements, and general content with good readability. - `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.

'subdued' | 'base' | 'strong'

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> | null required: A callback fired after the chip is hidden.
Anchor to click click <typeof tagName> | null required: A callback fired when the chip is clicked.

Learn more about the click event.
Anchor to remove remove <typeof tagName> | null required: A callback fired when the chip is removed.

CallbackEventListener

A function that handles events from UI components. This type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.

(EventListener & {
      (event: CallbackEvent<T>): void;
    }) | null

CallbackEvent

An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event. This type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.

Event & {
  currentTarget: HTMLElementTagNameMap[T];
}

Anchor to SlotsSlots

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

Anchor to children children HTMLElement: The text label displayed within the chip, which represents an interactive filter, tag, or selectable item.
Anchor to graphic graphic HTMLElement: An optional icon to display at the start of the chip. Accepts only icon components.

Anchor to ExamplesExamples

Anchor to Add a clickable chip with default stylingAdd a clickable chip with default styling

Create an interactive chip that merchants can click to trigger an action. This example shows a clickable chip component with default styling.

Preview

html

<s-clickable-chip>Clickable chip</s-clickable-chip>

Anchor to Apply color variants to chipsApply color variants to chips

Use the color property to visually distinguish chips by importance or category. This example shows three chips with base, subdued, and strong color variants.

Preview

html

<s-stack direction="inline" gap="base">

<s-clickable-chip color="base" accessibilityLabel="Filter by active products">

Active

</s-clickable-chip>

<s-clickable-chip

color="subdued"

accessibilityLabel="Filter by draft products"

Draft

</s-clickable-chip>

<s-clickable-chip

color="strong"

accessibilityLabel="Filter by archived products"

Archived

</s-clickable-chip>

</s-stack>

Anchor to Add an icon and a remove button to a chipAdd an icon and a remove button to a chip

Add an icon and a remove button so merchants can see the status and dismiss the chip. This example shows a removable chip with a check circle icon in the graphic slot.

Preview

html

<s-clickable-chip

color="strong"

accessibilityLabel="Remove status filter"

removable

<s-icon slot="graphic" type="check-circle"></s-icon>

In progress

</s-clickable-chip>

Anchor to Use a chip as a linkUse a chip as a link

Set the href property to make a chip link to another page when clicked. This example shows a subdued chip with a product icon that acts as a link.

Preview

html

<s-clickable-chip

color="subdued"

href="javascript:void(0)"

accessibilityLabel="View T-shirt product"

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

T-shirt

</s-clickable-chip>

Anchor to Disable a clickable chipDisable a clickable chip

Disable a chip to prevent interaction while keeping it visible. This example shows a disabled chip with an accessibility label explaining the inactive state.

Preview

html

<s-clickable-chip

color="base"

disabled

accessibilityLabel="Status filter (disabled)"

Inactive

</s-clickable-chip>

Anchor to Best practicesBest practices

Keep labels to 1-3 words: Aim for labels like Electronics, Summer sale, or Clearance items.
Choose color variants by importance: Use subdued for less important or secondary chips, base (default) for standard selections, and strong to emphasize primary or active selections.
Make remove action clear: When chips are removable, ensure the remove button's visible and has clear hover/focus states.
Group related chips together: Use an inline stack to arrange multiple chips horizontally with consistent spacing.

Was this page helpful?