Components / Alert Dialog

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response: role="alertdialog", focus-trapped, with initial focus on Cancel. Unlike a plain dialog, clicking the overlay never closes it; only an explicit Action, Cancel, or Escape does. The behaviour comes from the brain; this preview is the real component running in WebAssembly.

Examples

razor

<ZitsAlertDialog>
    <ZitsAlertDialogTrigger class="...">Delete account</ZitsAlertDialogTrigger>
    <ZitsAlertDialogContent>
        <ZitsAlertDialogHeader>
            <ZitsAlertDialogTitle>Are you absolutely sure?</ZitsAlertDialogTitle>
            <ZitsAlertDialogDescription>
                This action cannot be undone.
            </ZitsAlertDialogDescription>
        </ZitsAlertDialogHeader>
        <ZitsAlertDialogFooter>
            <ZitsAlertDialogCancel>Cancel</ZitsAlertDialogCancel>
            <ZitsAlertDialogAction>Continue</ZitsAlertDialogAction>
        </ZitsAlertDialogFooter>
    </ZitsAlertDialogContent>
</ZitsAlertDialog>

Installation

Terminal bash

navius add alert-dialog

API reference

Prop	Type	Default
Open	bool	false
OpenChanged	EventCallback<bool>	-
DefaultOpen	bool	false
ChildContent	RenderFragment?	-