Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Installation

biji-ui = { version = "0.5.0", features = ["dialog"] }

Usage

use std::time::Duration;
use leptos::prelude::*;
use biji_ui::components::dialog;

#[component]
pub fn MyDialog() -> impl IntoView {
    view! {
        <dialog::Root hide_delay={Duration::from_millis(200)}>
            <dialog::Trigger class="rounded bg-indigo-600 px-4 py-2 text-white">
                "Open dialog"
            </dialog::Trigger>
            <dialog::Overlay
                class="fixed inset-0 z-[80] bg-black/40"
                show_class="opacity-100 duration-300 ease-out"
                hide_class="opacity-0 duration-200 ease-in"
            />
            <dialog::Content
                class="fixed left-1/2 top-1/2 z-[90] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-background p-6 shadow-xl"
                show_class="opacity-100 scale-100 duration-300 ease-out"
                hide_class="opacity-0 scale-95 duration-200 ease-in"
            >
                <h2 class="text-lg font-semibold">"Payment successful"</h2>
                <p class="mt-2 text-sm">"Your payment has been processed."</p>
                <dialog::Close class="mt-4 inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500">
                    "Go back to dashboard"
                </dialog::Close>
            </dialog::Content>
        </dialog::Root>
    }
}

RootWith

Use RootWith to access DialogState inline via the let: binding. The state is Copy and safe to pass as a prop.

Dialog is closed

use std::time::Duration;
use leptos::prelude::*;
use biji_ui::components::dialog;

#[component]
pub fn MyDialog() -> impl IntoView {
    view! {
        <dialog::RootWith hide_delay={Duration::from_millis(200)} let:d>
            <p class="mb-2 text-sm text-muted-foreground">
                {move || if d.open.get() { "Dialog is open" } else { "Dialog is closed" }}
            </p>
            <dialog::Trigger class="rounded bg-indigo-600 px-4 py-2 text-white">
                "Open dialog"
            </dialog::Trigger>
            <dialog::Overlay
                class="fixed inset-0 z-[80] bg-black/40"
                show_class="opacity-100 duration-300 ease-out"
                hide_class="opacity-0 duration-200 ease-in"
            />
            <dialog::Content
                class="fixed left-1/2 top-1/2 z-[90] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-background p-6 shadow-xl"
                show_class="opacity-100 scale-100 duration-300 ease-out"
                hide_class="opacity-0 scale-95 duration-200 ease-in"
            >
                <h2 class="text-lg font-semibold">"Payment successful"</h2>
                <p class="mt-2 text-sm">"Your payment has been processed."</p>
                <dialog::Close class="mt-4 inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500">
                    "Go back to dashboard"
                </dialog::Close>
            </dialog::Content>
        </dialog::RootWith>
    }
}

API Reference

Root / RootWith

Name	Type	Default	Description
class	String	""	CSS class applied to the root wrapper element.
hide_delay	Duration	200ms	How long to wait before unmounting content and overlay after closing begins. Should match your CSS transition duration.
prevent_scroll	bool	true	When true, prevents the page from scrolling while the dialog is open.

Trigger

Name	Type	Default	Description
class	String	""	CSS class applied to the trigger button.

Content

Name	Type	Default	Description
class	String	""	CSS class applied in both open and closed states.
show_class	String	""	CSS class applied when the dialog is open.
hide_class	String	""	CSS class applied while the dialog is closing.

Overlay

Name	Type	Default	Description
class	String	""	CSS class applied in both open and closed states.
show_class	String	""	CSS class applied when the overlay is visible.
hide_class	String	""	CSS class applied while the overlay is hiding.

Close

Name	Type	Default	Description
class	String	""	CSS class applied to the close button.

Keyboard Navigation

Key	Description
`Tab`	Moves focus to the next focusable element inside the dialog. Focus is trapped within the dialog.
`Shift + Tab`	Moves focus to the previous focusable element inside the dialog.
`Escape`	Closes the dialog and returns focus to the trigger.