Skip to content
On this page

VAlert

Base class for alert

Props

NameTypeDescription
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.
dismiss-button-aria-labelstring
removablebooleanif the alert is removable accepts boolean
placementEnum:
top
top-start
top-end
bottom
bottom-start
bottom-end
the placement of the alert
headlinestringthe text of the alert heading accepts string
textstringthe main text of the alert accepts string
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 ...
alert header icon See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
timeoutmsnumberthe timeout ms to show the alert accepts number
connotationEnum:
accent
information
success
warning
alert
alert connotation
strategyEnum:
fixed
static
alert state
openbooleanindicates whether the alert is open

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.
openunknownFired when the alert is opened
closeunknownFired when the alert is closed

Slots

NameDescription
mainThe main content of the alert.
action-itemsAdd action items to alert using this slot.
iconAdd an icon to the component.

Methods

NameTypeDescription
openChanged(oldValue: boolean,newValue: boolean) => void