SClickableChip <s-clickable-chip>

An interactive chip that can be clicked, followed as a link or removed — useful for filters and applied tags. SClickableChip is the typed Vue 3 wrapper for Shopify's Polaris <s-clickable-chip> web component.

import { SClickableChip } from 'polaris-vue-elements'

Best practices

• Keep labels short. One to three words is the target, for example "Electronics" or "Summer sale".
• Choose color by importance. Use color="subdued" for secondary chips and keep the default "base" for standard selections.
• Make removal easy to spot. When a chip is removable, check that its remove button is visible and has clear hover and focus states.
• Group related chips. Lay them out in an inline SStack so they line up horizontally with even spacing.

<SStack direction="inline" gap="small-200">
  <SClickableChip>Electronics</SClickableChip>
  <SClickableChip color="subdued" removable>Summer sale</SClickableChip>
</SStack>

See Shopify's best practices for <s-clickable-chip> for the full guidance.

Example

Visit Polaris Removable chip

<script setup>
import { ref } from 'vue'
import { SClickableChip, SIcon } from 'polaris-vue-elements'

const removed = ref(false)
</script>

<template>
  <!-- SClickableChip is a Chip that can act as a link (href) or command trigger,
       and its `graphic` slot only accepts an SIcon. -->
  <SClickableChip href="https://polaris.shopify.com" target="_blank">
    <template #graphic>
      <SIcon type="external" />
    </template>
    Visit Polaris
  </SClickableChip>

  <!-- removable chips fire `remove`; drive `hidden` from app state to actually hide it. -->
  <SClickableChip removable :hidden="removed" @remove="removed = true">
    Removable chip
  </SClickableChip>
</template>

Props

Prop	Type	Description
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.
color	"subdued" | "base" | "strong"	Modify the color to be more or less intense.
command	"--auto" | "--show" | "--hide" | "--toggle" | "--copy"	Sets the action the commandFor should take when this clickable is activated. See the documentation of particular components for the actions they support. - --auto: a default action for the target component. - --show: shows the target component. - --hide: hides the target component. - --toggle: toggles the target component. - --copy: copies the target ClipboardItem.
commandFor	string	ID of a component that should respond to activations (e.g. clicks) on this component. See command for how to control the behavior of the target.
disabled	boolean	Whether the chip is disabled, preventing any user interaction.
hidden	boolean	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.
href	string	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.
interestFor	string	ID of a component that should respond to interest (e.g. hover and focus) on this component.
removable	boolean	Whether the chip displays a remove button for dismissal. When clicked, the remove callback fires.

Events

Event	Type
afterhide	CustomEvent
click	MouseEvent
remove	CustomEvent

Listen for these with @afterhide-style listeners on <SClickableChip>.

Slots

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