Modal

Overlay

An accessible dialog overlay with ESC to close and focus trap. Requires v-model and a trigger.

Props

Prop	Type	Default	Description
`modelValue`*	`boolean`	—	Open/close state (v-model).
`title`	`string`	—	Modal title shown in the header.
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'md'`	Dialog width.

Examples

vue

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

<template>
  <DsButton @click="open = true">Open modal</DsButton>
  <DsModal v-model="open" title="Confirmation">
    Are you sure you want to continue?
    <template #footer>
      <DsButton variant="ghost" @click="open = false">Cancel</DsButton>
      <DsButton @click="open = false">Confirm</DsButton>
    </template>
  </DsModal>
</template>

Accessibility

Closes on ESC key.
Focus is trapped inside the dialog while open.
Clicking the backdrop closes the modal.
Uses aria-modal="true" and role="dialog".

LoadingOverlay

Popover