Tags

<script setup lang="ts">
import { VTag, VTagGroup } from '@vonage/vivid-api-vue';
</script>
<template>
  <VTagGroup>
    <VTag label="Tag one" />
    <VTag label="Tag two" />
  </VTagGroup>
</template>

<script type="module">
  import { registerTag, registerTagGroup } from '@vonage/vivid-api';
  registerTag('your-prefix');
  registerTagGroup('your-prefix');
</script>

<your-prefix-tag-group>
  <your-prefix-tag label="Tag one"></your-prefix-tag>
  <your-prefix-tag label="Tag two"></your-prefix-tag>
</your-prefix-tag-group>

<script setup lang="ts">
import { VIcon, VTag, VTagGroup } from '@vonage/vivid-api-vue';
</script>

<template>
  <VTagGroup>
    <VTag label="With icon">
      <template #icon><VIcon name="heart-solid" connotation="alert" /></template>
    </VTag>
  </VTagGroup>
</template>

<vwc-tag-group>
  <vwc-tag label="With icon">
    <vwc-icon slot="icon" name="heart-solid" connotation="alert"></vwc-icon>
  </vwc-tag>
</vwc-tag-group>