Skip to content
On this page

VEmptyState

An empty state element. Used when there is no data to display to the user.

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.
connotationEnum:
accent
cta
success
alert
warning
information
The connotation the empty state should have.
headlinestringAn optional headline for the empty state.
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
... 1217 more ...
Icon for the empty state. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
icon-decorationEnum:
outlined
filled
option to a new design for the icon circle

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
defaultThe default slot controls the body text of the empty state
graphicThe graphic slot allows overriding the icon with a custom illustration
action-itemsSlot to add action items to the empty state