Tags
Tags are small, interactive labels used to visually group, classify, or filter criteria. Tags are wrapped with Tag Group
Tags should be wrapped by the Tag Group component to provide the correct layout and also semantic meaning.
The label attribute adds label text to the Tag.
<script setup lang="ts">import { VTag, VTagGroup } from '@vonage/vivid-api-vue';</script>
<template> <VTagGroup> <VTag label="Tag label" /> </VTagGroup></template><vwc-tag-group> <vwc-tag label="Tag label"></vwc-tag></vwc-tag-group>The selectable attribute enables the selectable behaviour. Use the selected attribute to mark the Tag as selected.
<script setup lang="ts">import { VTag, VTagGroup } from '@vonage/vivid-api-vue';</script>
<template> <VTagGroup> <VTag selectable label="Selectable tag" /> <VTag selected selectable label="Selected tag" /> </VTagGroup></template><vwc-tag-group> <vwc-tag selectable label="Selectable tag"></vwc-tag> <vwc-tag selected selectable label="Selected tag"></vwc-tag></vwc-tag-group>The removable attribute enables the removable behaviour. Clicking the remove icon removes the Tag from the Tag Group
<script setup lang="ts">import { VTag, VTagGroup } from '@vonage/vivid-api-vue';</script>
<template> <VTagGroup> <VTag removable label="Removable tag 1" /> <VTag removable label="Removable tag 2" /> </VTagGroup></template><vwc-tag-group> <vwc-tag removable label="Removable tag 1"></vwc-tag> <vwc-tag removable label="Removable tag 2"></vwc-tag></vwc-tag-group>The appearance attribute sets the Tag’s appearance.
<script setup lang="ts">import { VTag, VTagGroup } from '@vonage/vivid-api-vue';</script>
<template> <VTagGroup> <VTag label="Subtle" appearance="subtle" /> <VTag label="Subtle-Light" appearance="subtle-light" /> <VTag label="Duotone" appearance="duotone" /> </VTagGroup></template><vwc-tag-group> <vwc-tag label="Subtle" appearance="subtle"></vwc-tag> <vwc-tag label="Subtle-Light" appearance="subtle-light"></vwc-tag> <vwc-tag label="Duotone" appearance="duotone"></vwc-tag></vwc-tag-group>The connotation attribute sets the Tag’s connotation.
It accepts a subset of predefined values.
<script setup lang="ts">import { VTag, VTagGroup } from '@vonage/vivid-api-vue';</script>
<template> <p>Subtle tag with connotation</p> <VTagGroup> <VTag label="Accent" appearance="subtle" connotation="accent" /> <VTag label="CTA" appearance="subtle" connotation="cta" /> <VTag label="Information" appearance="subtle" connotation="information" /> <VTag label="Announcement" appearance="subtle" connotation="announcement" /> <VTag label="Success" appearance="subtle" connotation="success" /> <VTag label="Warning" appearance="subtle" connotation="warning" /> <VTag label="Alert" appearance="subtle" connotation="alert" /> </VTagGroup> <p>Subtle-Light Tag with connotation</p> <VTagGroup> <VTag label="Accent" appearance="subtle-light" connotation="accent" /> <VTag label="CTA" appearance="subtle-light" connotation="cta" /> <VTag label="Information" appearance="subtle-light" connotation="information" /> <VTag label="Announcement" appearance="subtle-light" connotation="announcement" /> <VTag label="Success" appearance="subtle-light" connotation="success" /> <VTag label="Warning" appearance="subtle-light" connotation="warning" /> <VTag label="Alert" appearance="subtle-light" connotation="alert" /> </VTagGroup> <p>Duotone Tag with connotation</p> <VTagGroup> <VTag label="Accent" appearance="duotone" connotation="accent" /> <VTag label="CTA" appearance="duotone" connotation="cta" /> <VTag label="Information" appearance="duotone" connotation="information" /> <VTag label="Announcement" appearance="duotone" connotation="announcement" /> <VTag label="Success" appearance="duotone" connotation="success" /> <VTag label="Warning" appearance="duotone" connotation="warning" /> <VTag label="Alert" appearance="duotone" connotation="alert" /> </VTagGroup></template><p>Subtle tag with connotation</p><vwc-tag-group> <vwc-tag label="Accent" appearance="subtle" connotation="accent"></vwc-tag> <vwc-tag label="CTA" appearance="subtle" connotation="cta"></vwc-tag> <vwc-tag label="Information" appearance="subtle" connotation="information"></vwc-tag> <vwc-tag label="Announcement" appearance="subtle" connotation="announcement"></vwc-tag> <vwc-tag label="Success" appearance="subtle" connotation="success"></vwc-tag> <vwc-tag label="Warning" appearance="subtle" connotation="warning"></vwc-tag> <vwc-tag label="Alert" appearance="subtle" connotation="alert"></vwc-tag></vwc-tag-group><p>Subtle-Light Tag with connotation</p><vwc-tag-group> <vwc-tag label="Accent" appearance="subtle-light" connotation="accent"></vwc-tag> <vwc-tag label="CTA" appearance="subtle-light" connotation="cta"></vwc-tag> <vwc-tag label="Information" appearance="subtle-light" connotation="information"></vwc-tag> <vwc-tag label="Announcement" appearance="subtle-light" connotation="announcement"></vwc-tag> <vwc-tag label="Success" appearance="subtle-light" connotation="success"></vwc-tag> <vwc-tag label="Warning" appearance="subtle-light" connotation="warning"></vwc-tag> <vwc-tag label="Alert" appearance="subtle-light" connotation="alert"></vwc-tag></vwc-tag-group><p>Duotone Tag with connotation</p><vwc-tag-group> <vwc-tag label="Accent" appearance="duotone" connotation="accent"></vwc-tag> <vwc-tag label="CTA" appearance="duotone" connotation="cta"></vwc-tag> <vwc-tag label="Information" appearance="duotone" connotation="information"></vwc-tag> <vwc-tag label="Announcement" appearance="duotone" connotation="announcement"></vwc-tag> <vwc-tag label="Success" appearance="duotone" connotation="success"></vwc-tag> <vwc-tag label="Warning" appearance="duotone" connotation="warning"></vwc-tag> <vwc-tag label="Alert" appearance="duotone" connotation="alert"></vwc-tag></vwc-tag-group>The shape attribute sets Tag’s shape.
<script setup lang="ts">import { VTag, VTagGroup } from '@vonage/vivid-api-vue';</script>
<template> <VTagGroup> <VTag label="Rounded" shape="rounded" /> <VTag label="Pill" shape="pill" /> </VTagGroup></template><vwc-tag-group> <vwc-tag label="Rounded" shape="rounded"></vwc-tag> <vwc-tag label="Pill" shape="pill"></vwc-tag></vwc-tag-group>Use the icon slot to add an icon from the icon library to the component.
<script setup lang="ts">import { VIcon, VTag, VTagGroup } from '@vonage/vivid-api-vue';</script>
<template> <VTagGroup> <VTag label="Tag with icon"> <template #icon><VIcon name="pin-line" /></template> </VTag> </VTagGroup></template><vwc-tag-group> <vwc-tag label="Tag with icon"> <vwc-icon slot="icon" name="pin-line"></vwc-icon> </vwc-tag></vwc-tag-group>The disabled attribute sets the disabled state.
<script setup lang="ts">import { VTag, VTagGroup } from '@vonage/vivid-api-vue';</script>
<template> <VTagGroup> <VTag label="Disabled tag" disabled /> </VTagGroup></template><vwc-tag-group> <vwc-tag label="Disabled tag" disabled></vwc-tag></vwc-tag-group>