Dialog

<NaviusDialog @bind-Open="_open">
    <NaviusDialogTrigger class="... bg-primary text-primary-foreground">
        Edit profile
    </NaviusDialogTrigger>

    <NaviusDialogBackdrop
        class="fixed inset-0 z-50 bg-black/60 data-[open]:animate-in" />

    <NaviusDialogPopup
        class="fixed left-1/2 top-1/2 z-50 grid w-full max-w-md
               -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border
               border-border bg-popover p-6 text-popover-foreground shadow-md">
        <NaviusDialogTitle class="text-lg font-semibold">Edit profile</NaviusDialogTitle>
        <NaviusDialogDescription class="text-sm text-muted-foreground">
            Make changes to your profile here. Click save when you're done.
        </NaviusDialogDescription>

        <label for="name">Name</label>
        <input id="name" value="Lior Zitser" />
        <label for="username">Username</label>
        <input id="username" value="@lzitser23" />

        <NaviusDialogClose class="... bg-primary">Save changes</NaviusDialogClose>
        <NaviusDialogClose class="absolute right-4 top-4 ...">
            <span class="sr-only">Close</span>
        </NaviusDialogClose>
    </NaviusDialogPopup>
</NaviusDialog>

@code { private bool _open; }

Features

• Can be controlled (@bind-Open) or uncontrolled (DefaultOpen).
• Backdrop and popup portal to document.body, escaping ancestor clipping and stacking contexts.
• When modal, focus is trapped inside the content and page scroll is locked.
• Dismiss on Escape and on pointer-down outside, each through a cancelable callback.
• Focus is moved into the dialog on open and restored to the trigger on close.
• aria-labelledby / aria-describedby are wired only when a Title / Description is mounted.

Installation

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

navius add dialog

Anatomy

Import the parts and assemble them.

@using Navius.Primitives.Components.Dialog

<NaviusDialog>
    <NaviusDialogTrigger />
    <NaviusDialogBackdrop />
    <NaviusDialogPopup>
        <NaviusDialogTitle />
        <NaviusDialogDescription />
        <NaviusDialogClose />
    </NaviusDialogPopup>
</NaviusDialog>

API Reference

Root

Contains all the parts of a dialog. Owns the open state and cascades context to the parts; 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 document.body (or a Container). Renders no DOM of its own.

Backdrop

The dimmed backdrop behind the popup. Portaled to document.body; renders a div.

Data attributes

Popup

The panel that contains the dialog content. Self-portaled to document.body; renders a div with role=dialog.

Data attributes

Title

An accessible title announced when the dialog opens. aria-labelledby points here. Renders an h2.

Description

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

Close

A button that closes the dialog. Lives inside the content. Renders a button.

Accessibility

Adheres to the Dialog (Modal) WAI-ARIA design pattern.

A dialog requires an accessible name. Always render a NaviusDialogTitle; if you do not want it shown, wrap it in NaviusVisuallyHidden.

Keyboard interactions