Alert Dialog

<NaviusAlertDialog @bind-Open="_open">
    <NaviusAlertDialogTrigger class="...">Delete account</NaviusAlertDialogTrigger>

    <NaviusAlertDialogBackdrop class="fixed inset-0 z-50 bg-black/80" />
    <NaviusAlertDialogPopup
        class="fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 ...">
        <NaviusAlertDialogTitle class="text-lg font-semibold">
            Are you absolutely sure?
        </NaviusAlertDialogTitle>
        <NaviusAlertDialogDescription class="text-sm text-muted-foreground">
            This action cannot be undone. This will permanently delete your account.
        </NaviusAlertDialogDescription>
        <div class="flex justify-end gap-2">
            <NaviusAlertDialogCancel class="...">Cancel</NaviusAlertDialogCancel>
            <NaviusAlertDialogAction class="... bg-destructive">Continue</NaviusAlertDialogAction>
        </div>
    </NaviusAlertDialogPopup>
</NaviusAlertDialog>

@code { private bool _open; }

Features

• Can be controlled (@bind-Open) or uncontrolled (DefaultOpen).
• Focus is trapped within the content while open and restored to the trigger on close.
• Initial focus lands on the Cancel control, so the destructive default is never the active target.
• An interruption: outside-pointer clicks never dismiss it; only Escape, Cancel, or Action close it.
• Page scroll is locked while open.
• Self-portals to document.body to escape ancestor overflow, transform, and z-index stacking contexts.
• role="alertdialog" wired to its title and description via aria-labelledby / aria-describedby.

Installation

Install the brain, or copy just this primitive in with the CLI.

navius add alert-dialog

Anatomy

Import the parts and assemble them.

@using Navius.Primitives.Components.AlertDialog

<NaviusAlertDialog>
    <NaviusAlertDialogTrigger />
    <NaviusAlertDialogBackdrop />
    <NaviusAlertDialogPopup>
        <NaviusAlertDialogTitle />
        <NaviusAlertDialogDescription />
        <NaviusAlertDialogCancel />
        <NaviusAlertDialogAction />
    </NaviusAlertDialogPopup>
</NaviusAlertDialog>

API Reference

Root

Contains all the parts of an alert dialog. Owns the open state and renders no DOM of its own.

Trigger

The button that opens the dialog. Renders a button.

Data attributes

Portal

Optional wrapper that hoists the Backdrop and Popup to the portal target. Renders no DOM of its own.

Backdrop

The backdrop layer. Purely visual: clicking it never closes the dialog. Renders a div, portaled to the body.

Data attributes

Popup

The focus-trapped panel. Renders a div with role="alertdialog", self-portaled to the body.

Data attributes

Title

An accessible name for the dialog (aria-labelledby points here). Renders an h2.

Description

An accessible description for the dialog (aria-describedby points here). Renders a p.

Cancel

The cancelling action. Closes the dialog and receives initial focus. Renders a button.

Action

The confirming action. Closes the dialog. Renders a button.

Accessibility

Adheres to the alert dialog WAI-ARIA design pattern. Unlike a plain dialog, focus opens on the least destructive control and a click outside never dismisses it.

Keyboard interactions