SClickableChip <s-clickable-chip>

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

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	Disables the chip, disallowing any interaction.
hidden	boolean	Determines whether the chip is hidden. If this property is being set on each framework render (as in 'controlled' usage), and the chip is removable, ensure you update app state for this property when the remove event fires. If the chip is not removable, it can still be hidden by setting this property.
href	string	The URL to link to. - If set, it will navigate to the location specified by href after executing the click event. - If a commandFor is set, the command will be executed instead of the 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 is removable.

Events

Event	Type
afterhide	CustomEvent
click	CustomEvent
remove	CustomEvent

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

Slots

Slot	Description
default	The content of the clickable chip.
graphic	The graphic to display in the clickable chip. Only accepts Icon components.