BaseChip

A short label with, when it is one of a set someone assembled, a way to take it off: a filter, a recipient, a tag.

Import it from rei-kit: import { BaseChip } from 'rei-kit'

Open BaseChip in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { BaseChip } from 'rei-kit'

const tags = ref(['design', 'vue'])

function remove(tag: string) {
  tags.value = tags.value.filter((one) => one !== tag)
}
</script>

<template>
  <div class="flex flex-wrap gap-2">
    <BaseChip
      v-for="tag in tags"
      :key="tag"
      :label="tag"
      :remove-label="`Remove ${tag}`"
      @remove="remove(tag)"
    />
  </div>
</template>

Props

Props
Prop	Type	Required or default	What it is for
`label`	`string`	yes	The text. Already translated.
`icon`	`Component`	undefined
`tone`	`'neutral' \| 'primary' \| 'success' \| 'warning' \| 'danger'`	'neutral'
`removeLabel`	`string`	undefined	Given, the chip grows a remove button. Its accessible name.
`selected`	`boolean`	undefined	Given, the whole chip is a toggle and this is its state.
`disabled`	`boolean`	false

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub