On this page

VDialog

Base class for dialog

Props

Name	Type	Description
aria-current	Enum: `page` `step` `location` `date` `time` `true` `false`	Indicates the element that represents the current item within a container or set of related elements.
open	`boolean`	Indicates dialog's state
icon	Enum: `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 ...	undefined See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
icon-placement	Enum: `top` `side`
subtitle	`string`
headline	`string`
full-width-body	`boolean`
aria-label	`string`
dismiss-button-aria-label	`string`
no-light-dismiss	`boolean`

Events

Name	Event Type	Description
click	`MouseEvent`	Fires 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.
focus	`FocusEvent`	Fires when the element receives focus.
blur	`FocusEvent`	Fires when the element loses focus.
keydown	`KeyboardEvent`	Fires when a key is pressed.
keyup	`KeyboardEvent`	Fires when a key is released.
input	`Event`	Fires when the value of an element has been changed.
close	`unknown`	Fired when the dialog is closed.

Slots

Name	Description
graphic	Use the graphic slot in order to replace the icon.
body	Use the body slot in order to add custom HTML to the dialog.
footer	Use the footer slot in order to add action buttons to the bottom of the dialog.
main	Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.
action-items	Use the action-items slot in order to add action buttons to the bottom of the dialog.

Methods

Name	Type	Description
close	`() => unknown`
show	`() => unknown`
showModal	`() => unknown`