ConfirmDialog

One destructive step, asked before it happens, over whichever dialog it was opened from. It is a PromptDialog with the danger button, stacked as a nested dialog, that closes itself once the step succeeds.

import { ConfirmDialog } from '@basmilius/react-ui/settings';

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

const wait = (ms: number): Promise<void> => 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)}
            />
        </>
    );
}

onConfirm returns a promise. While it runs the button goes quiet; when it resolves the dialog closes; when it rejects the reason stays on screen and the dialog stays open.

Prop	Type
open	boolean	Required.
onOpenChange	(open: boolean) => void	Required.
title	string	Required.
description	string	Required.
confirmLabel	string	Required.
onConfirm	() => Promise<void>	Required.

ConfirmDialogProps is an exported type.