Skip to content
Devix Open Source
Search products /
devix.pk

Reference

Options

Every call takes the same options; confirm, alert and prompt just set a few of them for you.

Option Type Default What it does
title string — The question.
description string — The detail under it.
tone 'neutral' | 'danger' | 'success' | 'warning' | 'info' 'neutral' Icon, button colour, and alertdialog for danger.
icon string | false by tone Your own markup, or none.
confirmText / cancelText string "Confirm" / "Cancel"
cancel boolean true false makes it an alert.
defaultAction 'confirm' | 'cancel' confirm, or cancel for danger Which button has focus.
requireText string — Type-to-confirm; the button stays disabled until it matches.
requireLabel string "Type X to confirm" The label above that box.
fields DialogField[] — Ask for values.
actions DialogAction[] confirm + cancel Your own buttons.
dismissible boolean true, false for danger Close when the backdrop is clicked.
onConfirm (values) => unknown | Promise — Runs before closing; throw or return false to stay open.
width number 400 Pixels.
theme 'light' | 'dark' | 'auto' 'auto' Follows the page.
container HTMLElement document.body Where the <dialog> is appended.
classNames Partial<Record<DialogPart, string>> — Your classes on every part.
strings Partial<DialogStrings> English confirm, cancel, close, type, required, working.

Fields

interface DialogField {
    name: string;
    label?: string;
    type?: 'text' | 'textarea' | 'password' | 'number' | 'email' | 'url' | 'checkbox';
    value?: string | number | boolean;
    placeholder?: string;
    required?: boolean;
    hint?: string;
    autocomplete?: string;
    validate?(value, values): string | void;   // return a message to refuse it
}

The first invalid field is focused and its message shown; the dialog stays open until everything passes. Values arrive typed — number as a number (or null when empty), checkbox as a boolean.

Actions

const answer = await dialog({
  title: 'You have unsaved changes',
  actions: [
    { value: 'discard', label: 'Discard', quiet: true, dismiss: true },
    { value: 'save', label: 'Save and leave', tone: 'success' },
  ],
});
answer?.action; // 'discard' | 'save' | undefined when dismissed

dismiss: true skips validation and closes immediately — what a cancel button does.

What comes back

interface DialogResult {
    action: string;      // 'confirm', 'cancel', or your action's value
    confirmed: boolean;
    values: Record<string, unknown>;
}

dialog() resolves with null when the dialog was dismissed with Escape or the backdrop. confirm() flattens that to false, and prompt() to null.

Defaults for the whole app

import { configure } from '@devix-labs/confirm-dialog';

configure({
  theme: 'auto',
  strings: { confirm: 'Yes', cancel: 'No' },
  classNames: { dialog: 'my-dialog', confirm: 'btn btn-primary' },
});
Updated 15 Sep 2026