Skip to content

VBadge

Props

NameTypeDescription
appearanceEnum:
filled
duotone
subtle
subtle-light
The appearance the badge should have.
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
success
alert
warning
information
The connotation the badge should have.
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
... 1227 more ...
A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
icon-trailingbooleanIndicates the icon affix alignment.
shapeEnum:
rounded
pill
The shape the badge should have.
textstringIndicates the badge's text.

Events

NameEvent TypeDescription
blurFocusEventFires when the element loses focus.
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.
inputEventFires when the value of an element has been changed.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.

Slots

NameDescription
iconAdd an icon to the component.