IDialog ​

A modal, with header, body and footer slots. It portals to the body, traps focus, and closes on Escape or an overlay click unless you say otherwise.

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

<template>
  <IButton variant="outline" @click="open = true">
    Open dialog
  </IButton>

  <IDialog
    v-model:open="open"
    title="Edit invoice"
    description="Escape, the overlay and the corner button all close this."
  >
    <p>Body content goes in the default slot.</p>

    <template #footer="{ close }">
      <IButton variant="outline" @click="close()">
        Cancel
      </IButton>
      <IButton @click="close()">
        Save
      </IButton>
    </template>
  </IDialog>
</template>

The footer slot receives close, so the common case needs no state handling of its own.

Forcing a choice ​

:dismissible="false" refuses Escape and the overlay. Pair it with :show-close="false" when one of the buttons has to be chosen.

<IDialog
  v-model:open="open"
  title="Make a choice"
  description="Escape and the overlay won't close this one."
  :dismissible="false"
  :show-close="false"
  size="sm"
>
  <template #footer="{ close }">
    <IButton variant="outline" @click="close()">
      Got it
    </IButton>
  </template>
</IDialog>

Sizes ​

sm, md (default), lg and xl cap the width from the sm breakpoint up. Below it the dialog is full-width minus a margin.

Scrolling ​

The body scrolls on its own, so the header and footer stay put on a short screen.

Confirmations ​

For a yes/no question, use useConfirm(). Mount <IConfirmDialog /> once, then call it from anywhere, including plain functions outside a component:

const { confirm } = useConfirm()

if (await confirm({ title: 'Delete this draft?', danger: true }))
  await remove()

Props ​

Slots: trigger, header, title, description, default (body), and footer (receives close).

The corner button closes the dialog even when dismissible is false; hide it with :show-close="false".