SChip <s-chip>

A static label for a tag or attribute, optionally removable. SChip is the typed Vue 3 wrapper for Shopify's Polaris <s-chip> web component.

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

Best practices

• Use chips to describe, not to act. Chips work well for tags, statuses and categories that tell merchants something about the content. They aren't buttons, so when a chip needs to be clicked or dismissed, use SClickableChip instead.
• Keep labels short. Brief text like "Featured" or "On sale" can be read at a glance, while long labels slow scanning and may get cut off.
• Match the visual weight to the content. Use color="subdued" for secondary metadata and the default color for ordinary tags and categories.
• Place chips next to what they describe. Keep them beside the item they label, and in lists put them in the same position on every row so merchants can scan quickly.
• Add an icon when it helps. An SIcon in the graphic slot can make a status or familiar category easier to recognize.

<SChip>
  <SIcon slot="graphic" type="star" />
  Featured
</SChip>
<SChip color="subdued">Imported</SChip>

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

Example

Snowboard Removable chip

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

const removed = ref(false)
</script>

<template>
  <!-- SChip's `graphic` slot only accepts an SIcon. -->
  <SChip>
    <template #graphic>
      <SIcon type="product" />
    </template>
    Snowboard
  </SChip>

  <!-- SChip has no `hidden` prop (unlike SClickableChip) — use v-if to remove it
       from the DOM when `remove` fires. -->
  <SChip v-if="!removed" color="strong" removable @remove="removed = true">
    Removable chip
  </SChip>
</template>

Props

Prop	Type	Description
accessibilityLabel	string	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.
color	"subdued" | "base" | "strong"	The color emphasis level that controls visual intensity.
removable	boolean	Whether the chip is removable.

Events

Event	Type
remove	CustomEvent

Listen for these with @remove-style listeners on <SChip>.

Slots

Slot	Description
default	The text label displayed within the chip component, typically representing a selected filter, tag, or removable item.
graphic	An optional icon to display at the start of the chip. Accepts only icon components.