Chip

1<script setup lang="ts">2import { Chip } from '@vitral/vue';3</script>4 5<template>6    <Chip label="Action" />7    <Chip label="Comedy" />8    <Chip label="Mystery" />9    <Chip label="Thriller" />10</template>

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

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