Modals

VdModal renders an overlay dialog for confirmations, forms, and focused tasks. Drive it from a boolean with v-model:open, choose one of four size tiers, and fill the body / #footer slots — the header title and close button are rendered for you. It teleports to <body>, traps Escape, and closes on a backdrop click unless you opt out.

Modal Sizes
<script setup lang="ts">
import { ref } from "vue";
import { VdModal } from "@vanduo-oss/vd3";

const open = ref(false);
</script>

<template>
  <button class="vd-btn vd-btn-primary" @click="open = true">Open Modal</button>

  <VdModal v-model:open="open" title="Modal Title" size="md">
    <p class="vd-mb-0">Modal content goes here.</p>
    <template #footer>
      <button class="vd-btn vd-btn-outline-secondary" @click="open = false">
        Cancel
      </button>
      <button class="vd-btn vd-btn-primary" @click="open = false">Save</button>
    </template>
  </VdModal>
</template>
Static Backdrop

Pass :close-on-backdrop="false" so a backdrop click does not dismiss a destructive confirmation.

CSS Variables
VariableDefaultDescription
--vd-modal-bgvar(--vd-color-white)Panel background
--vd-modal-backdrop-bgrgba(0,0,0,0.5)Backdrop overlay color
--vd-modal-border-colorvar(--vd-border-color)Panel border color
--vd-modal-padding1.3125rem (21px)Panel padding (Fibonacci)
--vd-modal-header-padding1.3125remHeader padding
--vd-modal-body-padding1.3125remBody padding
--vd-modal-footer-padding1.3125remFooter padding
--vd-modal-width-sm233pxSmall width (fib 13)
--vd-modal-width377pxDefault width (fib 14)
--vd-modal-width-lg610pxLarge width (fib 15)
--vd-modal-width-xl987pxExtra-large width (fib 16)
--vd-modal-z-index1050Modal stacking
--vd-modal-backdrop-z-index1040Backdrop stacking
API Reference

Usage

<script setup lang="ts">
import { ref } from "vue";
import { VdModal } from "@vanduo-oss/vd3";

const open = ref(false);
</script>

<template>
  <button class="vd-btn vd-btn-primary" @click="open = true">Open Modal</button>

  <VdModal v-model:open="open" title="Modal Title" size="md">
    <p class="vd-mb-0">Modal content goes here.</p>
    <template #footer>
      <button class="vd-btn vd-btn-outline-secondary" @click="open = false">
        Cancel
      </button>
      <button class="vd-btn vd-btn-primary" @click="open = false">Save</button>
    </template>
  </VdModal>
</template>

Props

PropDescription
openboolean (required) — controls visibility. Pair with v-model:open or handle @update:open.
titlestring — header title; also used as the dialog aria-label (falls back to "Dialog").
size"sm" | "md" | "lg" | "xl" — panel width (default "md").
closeOnBackdropboolean — whether a backdrop click closes the modal (default true).

Events

EventDescription
update:openEmitted with false when the modal requests to close (backdrop, Escape, or the close button). Enables v-model:open.
closeEmitted alongside update:open whenever the modal closes.

Slots

SlotDescription
headerOptional extra header content, rendered after the title.
defaultThe modal body content.
footerFooter action bar — rendered only when provided.

CSS Classes

ClassDescription
.vd-modalRoot overlay container (present only while the modal is open).
.vd-modal-openMarks the overlay as open — drives the visible state.
.vd-modal-backdropFull-screen backdrop; a click closes the modal unless close-on-backdrop is false.
.vd-modal-panelThe centered dialog panel holding the header, body, and footer.
.vd-modal-panel-sm / -md / -lg / -xlPanel width matching the size prop.
.vd-modal-headerHeader bar with the title and the auto-rendered close button.
.vd-modal-titleHeading element populated from the title prop.
.vd-modal-bodyBody region (the default slot).
.vd-modal-footerFooter action bar (the footer slot).
Accessibility
  • The overlay is a role="dialog" with aria-modal="true"; its accessible name comes from the title prop (falling back to "Dialog").
  • On open, focus moves to the dialog panel so keyboard users start inside the modal.
  • Escape closes the modal (emitting update:open and close).
  • A backdrop click closes the modal unless :close-on-backdrop="false".
  • The auto-rendered close button carries aria-label="Close".