Vitral 0.2
Misc

Chip

A compact token for a filter, a recipient or a tag, with an optional image, icon and remove button.

WAI-ARIA tested

Import

main.ts
import { Chip } from '@vitral/vue';

Basic

ActionComedyMysteryThriller
<script setup lang="ts">import { Chip } from '@vitral/vue';</script> <template>    <Chip label="Action" />    <Chip label="Comedy" />    <Chip label="Mystery" />    <Chip label="Thriller" /></template>

Icon and image

StarredScheduledAda Lovelace
<script setup lang="ts">import { Chip } from '@vitral/vue';</script> <template>    <Chip label="Starred" icon="star" />    <Chip label="Scheduled" icon="clock" />    <Chip label="Ada Lovelace" image="https://i.pravatar.cc/48?img=5" /></template>

Removable

Tab to a remove button and press Delete.

Ada LovelaceGrace HopperKatherine JohnsonMargaret Hamilton
<script setup lang="ts">import { Chip } from '@vitral/vue';import { ref } from 'vue'; const recipients = ref(['Ada Lovelace', 'Grace Hopper', 'Katherine Johnson', 'Margaret Hamilton']);</script> <template>    <Chip v-for="r in recipients" :key="r" :label="r" removable @remove="recipients = recipients.filter((x) => x !== r)" />    <small v-if="!recipients.length" style="color: var(--vt-text-muted-color)">No recipients.</small></template>

API

Read from packages/vue/src/components/Chip/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
labelstring—
iconIconProp—
imagestringAn image shown before the label: a face, a logo.
imageAltstringThe image's alternative text. Empty marks it decorative, which it is beside a label.
removablebooleanAdds a remove button, named “Remove <label>”.
removeIconIconProp—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
removeevent: Event—

Slots

NameSlot propsDescription
default——
icon——
removeicon——

Used in these templates