Tag

1<script setup lang="ts">2import { Tag } from '@vitral/vue';3 4const severities = ['primary', 'secondary', 'success', 'info', 'warn', 'danger', 'help', 'contrast'] as const;5</script>6 7<template>8    <Tag v-for="s in severities" :key="s" :value="s" :severity="s" />9</template>

1<script setup lang="ts">2import { Tag } from '@vitral/vue';3</script>4 5<template>6    <Tag value="New" icon="star" />7    <Tag value="Verified" icon="check" severity="success" rounded />8    <Tag value="Due today" icon="clock" severity="warn" rounded />9    <Tag value="Blocked" icon="error" severity="danger" />10</template>

1<script setup lang="ts">2import { Tag } from '@vitral/vue';3import { ref } from 'vue';4 5const topics = ref(['vue', 'typescript', 'design-tokens', 'accessibility', 'layout']);6</script>7 8<template>9    <Tag v-for="t in topics" :key="t" :value="t" severity="secondary" rounded removable @remove="topics = topics.filter((x) => x !== t)" />10    <small v-if="!topics.length" style="color: var(--vt-text-muted-color)">All removed.</small>11</template>