ConfirmDialog

Confirms one destructive step over the dialog it opens from. It is a nested PromptDialog with a danger button that closes itself once the step succeeds.

import { ConfirmDialog } from '@adecore/ui/settings';

import { useState } from 'react';
import { Button } from '@adecore/ui';
import { ConfirmDialog } from '@adecore/ui/settings';

function wait(ms: number): Promise<void> {
    return new Promise((resolve) => window.setTimeout(resolve, ms));
}

export default function ConfirmDialogDemo() {
    const [open, setOpen] = useState(false);

    return (
        <>
            <Button variant="danger-outline" onClick={() => setOpen(true)}>
                Sign out everywhere
            </Button>
            <ConfirmDialog
                open={open}
                onOpenChange={setOpen}
                title="Sign out on every device?"
                description="Each device asks for your password again the next time it opens."
                confirmLabel="Sign out"
                onConfirm={() => wait(800)}
            />
        </>
    );
}

While the promise from onConfirm runs, the button is disabled. On resolve the dialog closes; on reject it stays open and shows the reason.

Props

Prop	Type	Default
open	boolean		Required.
onOpenChange	(open: boolean) => void		Required.
title	string		Required.
description	string		Required.
confirmLabel	string		Required.
onConfirm	() => Promise<void>		Required.
className	string		On the popup.
ref	Ref<HTMLDivElement>		On the popup.

ConfirmDialogProps is an exported type.