Confirm
#

A simple modal with message and ok and cancel buttons. Returns promise with true if ok clicked and false if cancel is clicked.

Options Api

Composition Api

export default {
  methods: {
    onButtonClick() {
      this.$vaModal.confirm('Are you sure you want to see standard alert?')
        .then((ok) => ok && alert('This is standard browser alert'))
    },
  },
}

Props
#

Any prop from VaModal can be passed to confirm. Event listeners can be passed with on prefix. For example, onClickOutside.

Name	Description	Types	Default
allowBodyScroll	Allows the document scroll while modal is open.	`Boolean`	`false`
anchorClass	Set class name to the `anchor` slot container	`String`	-
ariaCloseLabel	The aria-label of the close button	`String`	`"$t:close"`
attachElement	A valid selector of element, where modal will be rendered	`String`	`"body"`
backgroundColor	The background color of the modal dialog	`String`	`"background-secondary"`
beforeCancel		`Function`	-
beforeClose	Function run before closing the modal	`Function`	-
beforeOk		`Function`	-
blur	Use `blur` filter to overlay. Root `css` variable `--va-modal-overlay-background-blur-radius` sets the blur radius	`Boolean`	`false`
cancelText	Text string to place in the default footer Cancel button	`String`	`"$t:cancel"`
child:cancelButton		`Object`	-
child:closeButton		`Object`	-
child:okButton		`Object`	-
closeButton		`Boolean`	`false`
disableAttachment	Ignore `attach-element` prop and render component as it's parent child	`Boolean`	`false`
fixedLayout	Use `fixed-layout: true` to scroll only content in modal. Title and actions will be fixed	`Boolean`	`false`
fullscreen	Add the `fullscreen` prop to cover the whole page	`Boolean`	`false`
hideDefaultActions	Use `hide-default-actions: true` to hide Cancel and Ok buttons	`Boolean`	`false`
maxHeight	Use `max-height` to change the maximum height of the modal. If content is larger, scroll will appear	`String`	`""`
maxWidth	Use `max-width` to change the maximum width of the modal.	`String`	`""`
message	Content of modal body	`String`	`""`
mobileFullscreen	Use `mobile-fullscreen: false` to disable fullscreen mode for mobile viewports	`Boolean`	`true`
noDismiss	Disable both close on overlay click and close on Esc	`Boolean`	`false`
noEscDismiss	Disable close on Esc	`Boolean`	`false`
noOutsideDismiss	Disable close on overlay click	`Boolean`	`false`
noPadding	Disable padding in the modal dialog	`Boolean`	`false`
okText	Text string to place in the default footer Ok button	`String`	`"$t:ok"`
onBeforeClose	Function to be called before closing	`Function`
onBeforeOpen	Function to be called before opening	`Function`
onCancel	Function to be called after cancel button is been pressed	`Function`
onClickOutside	Function to be called after clicking outside the modal	`Function`
onClose	Function to be called after closing	`Function`
onOk	Function to be called after pressing the "ok" button	`Function`
onOpen	Function to be called after opening the modal	`Function`
overlay	Use `overlay: false` to hide the overlay	`Boolean`	`true`
overlayOpacity	Set the overlay's opacity	`Number \| String`	`0.6`
showNestedOverlay		`Boolean`	`false`
size	Set the size of the modal's width. `"small"`, `"medium"` (default) or `"large"`	`String`	`"medium"`
sizesConfig	Provide a set of sizes as a global component specific setting.	`Object`	`{ "defaultSize": "medium", "sizes": { "small": 576, "medium": 768, "large": 992, "auto": "max-content" } }`
title	Text content to place in the title	`String`	`""`
withoutTransitions	Use `without-transitions: true` to turn off the open and close animations on the modal	`Boolean`	`false`
zIndex	Set the modal's `z-index`	`Number \| String`	-

Name	Description
beforeClose	Emits before modal's start closing after transition started
beforeOpen	Emits before modal's open after transition started
cancel	Emits when the user closes the modal window without side effects
clickOutside	Emits when overlay is clicked
close	Emits when modal's is closed and transition is complete
ok	Emits when Ok button is clicked
open	Emits when modal's is open and transition is complete
update:modelValue	The event is triggered when the component needs to change visibility

Confirm #

Props #

Events #

Confirm
#

Props
#