ClickableChip

Clickable chip element. Wraps the Polaris <s-clickable-chip> web component.

Usage

<template>
  <ShClickableChip color="green" removable>Active filter</ShClickableChip>
  <ShClickableChip href="/products" command-for="filter-popover" command="--show">
    Products
  </ShClickableChip>
</template>

Props

Prop	Type	Default	Description
`color`	`string`	—	Chip color
`accessibilityLabel`	`string`	—	Accessible label
`removable`	`boolean`	—	Shows a remove button
`hidden`	`boolean`	—	Hides the chip
`disabled`	`boolean`	—	Disables the chip
`href`	`string`	—	Makes the chip a link
`command`	`'--auto' \| '--show' \| '--hide' \| '--toggle'`	—	Command for invoketarget pattern
`commandFor`	`string`	—	Target element ID for command
`interestFor`	`string`	—	Target element for interest

Slots

Slot	Description
`default`	Chip content

Polaris Element

Renders as <s-clickable-chip>. See Polaris ClickableChip docs.

Edit this pageorReport an issue

Chip

Chip/tag element. Wraps the Polaris <s-chip> web component.

ListItem

List item. Wraps the Polaris <s-list-item> web component.