Dialog

A window overlaid on the page, demanding the user's attention before they can do anything else.

<template>
  <Dialog v-model:open="open" title="Delete repository" description="This can't be undone.">
    <template #footer>
      <Button variant="destructive" @click="onConfirm">Delete</Button>
    </template>
  </Dialog>
</template>

Props

Name	Type	Default
open	boolean (v-model:open)	false
title	string	—
description	string	—
close	boolean \| object	true
fullscreen	boolean	false

Slots

Name	Description
body	The dialog's main content.
footer	Action buttons, right-aligned by default (justify-end) — matches apps/frontend's own confirm-modal.vue: cancel as color="neutral" variant="ghost", the primary action last in its default solid color (or color="error" for a destructive confirm).
title	Escape hatch: replaces the `title` prop's plain text.
description	Escape hatch: replaces the `description` prop's plain text.

Usage

Examples

Basic

A modal for something the user can safely dismiss and return to later.

const open = ref(false)

<Button variant="secondary" @click="open = true">Edit profile</Button>
<Dialog v-model:open="open" title="Edit profile" description="Make changes to your profile here. Click save when you're done.">
  <template #body>
    <Input placeholder="Display name" class="w-full" />
  </template>
  <template #footer>
    <Button variant="primary" @click="open = false">Save changes</Button>
  </template>
</Dialog>

Destructive confirm

A dialog housing just the one destructive action, with no separate cancel button.

const open = ref(false)

<Button variant="secondary" @click="open = true">Delete repository</Button>
<Dialog v-model:open="open" title="Delete repository" description="This will permanently delete the repository and all of its scan history. This can't be undone.">
  <template #footer>
    <Button variant="destructive" @click="open = false">Delete</Button>
  </template>
</Dialog>