Tags
Tags are small, interactive labels used to visually group, classify, or filter criteria. Tags are wrapped with Tag Group
import { VTag, VTagGroup } from '@vonage/vivid-vue';
import { registerTag, registerTagGroup } from '@vonage/vivid';
registerTag('your-prefix');
registerTagGroup('your-prefix');
Use the icon slot in the Tag component to customise icons. If set, the icon attribute is ignored.
| Name |
Description |
| default |
The content of the tag-group.
|
| Name |
Description |
| default |
The content of the tag-group. |
| Property |
Type |
Default |
Description |
| appearance |
'duotone' | 'subtle' | 'subtle-light' |
|
The appearance the tag should have. |
| connotation |
'alert' | 'accent' | 'cta' | 'success' | 'warning' | 'information' | 'announcement' |
|
The connotation the tag should have. |
| disabled |
boolean |
|
indicates whether the tag is disabled |
| icon |
IconId |
|
A decorative icon the custom element should have. See the [Vivid Icon
Gallery](/icons/icons-gallery/) for available icons and `icon-name`s
See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/ |
| label |
string |
|
Indicates the tag's label. |
| removable |
boolean |
|
indicates whether the tag is removable |
| selectable |
boolean |
|
indicates whether the tag is selectable |
| selected |
boolean |
|
indicates whether the tag is selected |
| shape |
'rounded' | 'pill' |
|
The shape the tag should have. |
| Property |
Type |
Default |
Description |
|
appearance
|
'duotone' | 'subtle' | 'subtle-light' |
|
The appearance the tag should have. |
|
connotation
|
'alert' | 'accent' | 'cta' | 'success' | 'warning' | 'information' | 'announcement' |
|
The connotation the tag should have. |
|
disabled
|
boolean |
|
indicates whether the tag is disabled |
|
icon
|
IconId |
|
A decorative icon the custom element should have. See the [Vivid Icon
Gallery](/icons/icons-gallery/) for available icons and `icon-name`s
See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/ |
|
label
|
string |
|
Indicates the tag's label. |
|
removable
|
boolean |
|
indicates whether the tag is removable |
|
selectable
|
boolean |
|
indicates whether the tag is selectable |
|
selected
|
boolean |
|
indicates whether the tag is selected |
|
shape
|
'rounded' | 'pill' |
|
The shape the tag should have. |
| Name |
Description |
| icon |
The preferred way to add an icon to the component.
|
| Name |
Description |
| icon |
The preferred way to add an icon to the component. |
| Event |
Type |
Description |
| removed |
CustomEvent<undefined> |
Fires when the tag is removed |
| selected-change |
CustomEvent<undefined> |
Fires when the selected state changes |
| Name |
Type |
Description |
| removed |
CustomEvent<undefined> |
Fires when the tag is removed |
| selected-change |
CustomEvent<undefined> |
Fires when the selected state changes |
| Name |
Params |
Returns |
Description |
| remove |
|
void
|
|
