Skip to content
On this page

VTag

Base class for tag.

Props

NameTypeDescription
iconEnum:
10-sec-backward-solid
10-sec-forward-line
10-sec-forward-solid
accessibility-line
accessibility-solid
active-call-line
active-call-solid
add-call-line
add-call-solid
add-group-line
add-group-solid
add-line
... 1186 more ...
A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
aria-currentEnum:
page
step
location
date
time
true
false
Indicates the element that represents the current item within a container or set of related elements.
connotationEnum:
accent
cta
The connotation the tag should have.
shapeEnum:
rounded
pill
The shape the tag should have.
appearanceEnum:
subtle
duotone
The appearance the tag should have.
labelstringIndicates the tag's label.
removablebooleanindicates whether the tag is removable
disabledbooleanindicates whether the tag is disabled
selectablebooleanindicates whether the tag is selectable
selectedbooleanindicates whether the tag is selected

Events

NameEvent TypeDescription
clickMouseEventFires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focusFocusEventFires when the element receives focus.
blurFocusEventFires when the element loses focus.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.
inputEventFires when the value of an element has been changed.

Slots

NameDescription
iconAdd an icon to the component.

Methods

NameTypeDescription
remove() => void
handleKeydown(e: KeyboardEvent) => unknown
handleClick() => void