Components / Modal

A modal component that displays content in a floating window over the main content. It supports various sizes, customization options, and can be used for dialogs, forms, or any other content that needs to be displayed in a focused context above the page content.

Props

Name	Default	Type
`open`	`false`	`boolean` Controls the visibility of the modal
`size`	`'m'`	`xs` `s` `m` `l` `xl` `screen` Controls the width of the modal
`card`	-	`CardProps` Props to pass to the underlying Card component
`scrollable`	`false`	`boolean` Makes the modal content scrollable instead of the modal itself
`centered`	`false`	`boolean` Centers the modal vertically on the screen
`canDismiss`	`true`	`boolean` Whether the modal can be dismissed via Escape key or backdrop click
`hideCloseButton`	`false`	`boolean` Hides the X button in the top right of the modal. The modal can still be closed by other means
`transition-name`	`modal`	`string` `none` Allows you to change or disable the vue transition for the modal appear. By default, a `fade` animation with a bit of scaling is applied
`disableMobileFs`	`false`	`boolean` Disables the default behavior where the modal becomes fullscreen on mobile. The breakpoint can be configured via `vuiBreakpoints`

Events

Name	Payload	Description
`close`	-	Emitted when the modal is closed

Slots

Name	Props	Description
`default`	`{ close: () => void }`	The main content of the modal
`header`	`{ close: () => void }`	Custom header content
`footer`	`{ close: () => void }`	Custom footer content