Skip to content
On this page

VTag

Props

NameTypeDescription
iconEnum:
10-sec-backward-line
10-sec-backward-solid
10-sec-forward-line
10-sec-forward-solid
30-sec-backward-line
30-sec-backward-solid
30-sec-forward-line
30-sec-forward-solid
5-sec-backward-line
5-sec-backward-solid
5-sec-forward-line
5-sec-forward-solid
... 1208 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.
selected-changeCustomEvent<undefined>Fires when the selected state changes
removedCustomEvent<undefined>Fires when the tag is removed

Slots

NameDescription
iconAdd an icon to the component.

Methods

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