SChip <s-chip>

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

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.