Chip

Compact token — a tag, an active filter, a chosen value

A small square plate that names one thing: a tag on a post, a filter that's currently applied, a person (with image), a value picked in a multi-select. removable adds a × button — a real button, so it's in the tab order and reads as "Remove megumi"; pass label (not just the slot) when it's removable so that name exists. The × is a 24px target. Removing a chip removes the focused button with it, so on @remove move focus to a neighbour — the demo hands it to the next chip, or the previous one at the end.

A chip doesn't toggle. For filters that switch on and off use Toggle / ToggleGroup — they carry aria-pressed; a chip with color="accent" only looks selected — keep it for a value already chosen, like the picks of a multi-select, never for a chip at rest. To type chips into a field, InputTags makes them for you.

Basic

megumieririutahaEP.12Eriri

<script setup lang="ts">
import { nextTick, ref } from "vue";
import { BlessChip } from "blessing-ui";
import { shots } from "./_data";
const tags = ref(["megumi", "eriri", "utaha"]);
const row = ref<HTMLElement>();
// the × that had focus is gone: hand focus to the chip that took its place, or the one before
async function remove(i: number) {
  tags.value.splice(i, 1);
  await nextTick();
  const xs = row.value?.querySelectorAll<HTMLButtonElement>(".bless-chip__remove") ?? [];
  xs[Math.min(i, xs.length - 1)]?.focus();
}
</script>

<template>
  <div ref="row" class="row">
    <BlessChip v-for="(t, i) in tags" :key="t" :label="t" removable @remove="remove(i)" />
    <BlessChip label="EP.12" color="text" size="sm" />
    <BlessChip label="Eriri" :image="shots[0].src" />
  </div>
</template>

Usage

import { BlessChip } from "blessing-ui";

API

Props

Name	Type	Default	Description
label	string	—
icon	string	—
image	string	—
removable	boolean	—
removeLabel	string	"Remove"
color	"text" | "accent" | "surface"	"surface"
size	"md" | "sm"	"md"

Events

Name	Payload	Description
remove	[]

Slots

Name	Scope	Description
default	—