Modal
Modal is a dialog overlay that teleports to <body>, with a backdrop, optional title, close button, and configurable size.
Basic usage
vue
<script setup>
import { ref } from 'vue'
const open = ref(false)
</script>
<template>
<Button @click="open = true">Open Modal</Button>
<Modal :show="open" title="Confirm action" @close="open = false">
<p>Are you sure you want to proceed?</p>
<template #footer>
<Button variant="secondary" @click="open = false">Cancel</Button>
<Button variant="danger" @click="confirm">Delete</Button>
</template>
</Modal>
</template>Sizes
vue
<Modal :show="open" size="sm" title="Small">...</Modal>
<Modal :show="open" size="md" title="Medium (default)">...</Modal>
<Modal :show="open" size="lg" title="Large">...</Modal>
<Modal :show="open" size="xl" title="Extra large">...</Modal>| Size | Max width |
|---|---|
sm | 384px |
md (default) | 448px |
lg | 512px |
xl | 576px |
Without close button
vue
<Modal :show="open" :closable="false" title="Required action">
<p>You must complete this step before continuing.</p>
<template #footer>
<Button @click="open = false">Got it</Button>
</template>
</Modal>When closable is false, the X button is hidden and clicking the backdrop does not close the modal.
Without title
vue
<Modal :show="open" @close="open = false">
<p>Custom content without a title bar.</p>
</Modal>Backdrop click
By default, clicking outside the modal panel (on the backdrop) closes it. Disable this by setting :closable="false".
Animation
The modal uses Vue's <Transition> with a 200ms opacity fade on enter and 150ms on leave.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
show | boolean | — | Controls visibility |
title | string | — | Title text in the header bar |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Max width of the panel |
closable | boolean | true | Show X button and allow backdrop close |
Events
| Event | Description |
|---|---|
close | Emitted when the X button is clicked or the backdrop is clicked |
Slots
| Slot | Description |
|---|---|
| default | Modal body content |
footer | Optional footer — flex row, right-aligned, gap-3 |