useConfirm ​

A confirmation you can await. It resolves true when the reader confirms and false when they cancel or dismiss, so a destructive action guards itself in one line.

<script setup lang="ts">
import { useConfirm } from 'iryx-ui'

const { confirm } = useConfirm()

async function discard(draft) {
  if (await confirm({ title: 'Discard this draft?', danger: true }))
    await remove(draft)
}
</script>

Mount one IConfirmDialog in the app, typically just inside IApp, and it renders whatever the store holds. The store is module-level, so confirm() can be called from a plain function with no component in scope — a router guard, a service, a beforeunload handler.

// Nothing Vue about this file, and it still works.
export async function deleteInvoice(id: string) {
  const { confirm } = useConfirm()
  if (!await confirm('Delete this invoice?'))
    return
  await api.delete(id)
}

Options ​

A string is shorthand for { title }.

interface ConfirmOptions {
  title: string
  description?: string
  confirmLabel?: string
  cancelLabel?: string
  /** Style the confirming button as destructive. */
  danger?: boolean
}

Both labels are set per request, falling back to the IConfirmDialog's own props. Name the action on the confirming button — "Delete invoice" rather than "OK".

One at a time ​

A second call supersedes the first: the earlier promise resolves false and its dialog is replaced, so no caller is left awaiting a dialog that is no longer on screen.