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 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.
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 content of the Chip.
graphic	The graphic to display in the chip. Only accepts Icon components.