Alert Dialog

Overview

AlertDialog composes the headless NaviusAlertDialog primitive family, which owns the focus trap, scroll lock, portal, and the never-closes-on-outside-click behavior an alert dialog requires. The styled layer adds the backdrop overlay class, the popup’s centered card treatment, and preset button classes on Action (primary) and Cancel (outline).

Install

navius add alert-dialog --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<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>

Parts and props

ZitsAlertDialog (root), ZitsAlertDialogTrigger, ZitsAlertDialogTitle, ZitsAlertDialogDescription, and ZitsAlertDialogCancel/ZitsAlertDialogAction pass their own params through to the matching NaviusAlertDialog* primitive unchanged (Open, OpenChanged, DefaultOpen, ChildContent, Attributes). ZitsAlertDialogContent adds:

Prop	Type	Default	Description
Motion	string?	null	Optional Navius.Motion presence class (e.g. motion-pop) forwarded onto the popup. Inert unless the app links _content/Navius.Motion/navius-motion.css.

ZitsAlertDialogHeader and ZitsAlertDialogFooter render a plain div with layout classes; they have no underlying primitive.

Styling surface

Attributes on every part is merged with that part’s preset class set via Cn.Merge, caller classes applied last. ZitsAlertDialogContent exposes the overlay (fixed inset-0 z-50 bg-black/80 ...) and the popup card (fixed ... rounded-lg at sm:) as fixed base classes; there is no variant/size parameter to select between.

Data attribute hooks

Part	Attribute	Description
Backdrop / Popup	data-open / data-closed	Open-state hooks driving the enter/exit Tailwind animation classes, emitted by the composed NaviusAlertDialog* primitives.

Underlying primitives

• NaviusAlertDialog