Dioxus Componentsdioxus

Installation

Use the CLI command for the common path, or copy the component files manually.

Manual installation files

Copy the component source and CSS into your app. Import the shared theme CSS once near your app root.

use dioxus::prelude::*;
use dioxus_primitives::alert_dialog::{
    self, AlertDialogActionProps, AlertDialogActionsProps, AlertDialogCancelProps,
    AlertDialogDescriptionProps, AlertDialogRootProps, AlertDialogTitleProps,
};

#[component]
pub fn AlertDialog(props: AlertDialogRootProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/alert_dialog/style.css") }
        alert_dialog::AlertDialogRoot {
            class: "dx-alert-dialog-backdrop",
            id: props.id,
            default_open: props.default_open,
            open: props.open,
            on_open_change: props.on_open_change,
            attributes: props.attributes,
            alert_dialog::AlertDialogContent {
                class: "dx-alert-dialog".to_string(),
                {props.children}
            }
        }
    }
}

#[component]
pub fn AlertDialogTitle(props: AlertDialogTitleProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/alert_dialog/style.css") }
        alert_dialog::AlertDialogTitle {
            class: "dx-alert-dialog-title",
            attributes: props.attributes,
            {props.children}
        }
    }
}

#[component]
pub fn AlertDialogDescription(props: AlertDialogDescriptionProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/alert_dialog/style.css") }
        alert_dialog::AlertDialogDescription {
            class: "dx-alert-dialog-description",
            attributes: props.attributes,
            {props.children}
        }
    }
}

#[component]
pub fn AlertDialogActions(props: AlertDialogActionsProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/alert_dialog/style.css") }
        alert_dialog::AlertDialogActions { class: "dx-alert-dialog-actions", attributes: props.attributes, {props.children} }
    }
}

#[component]
pub fn AlertDialogCancel(props: AlertDialogCancelProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/alert_dialog/style.css") }
        alert_dialog::AlertDialogCancel {
            on_click: props.on_click,
            class: "dx-alert-dialog-cancel",
            attributes: props.attributes,
            {props.children}
        }
    }
}

#[component]
pub fn AlertDialogAction(props: AlertDialogActionProps) -> Element {
    rsx! {
        document::Link { rel: "stylesheet", href: asset!("/src/components/alert_dialog/style.css") }
        alert_dialog::AlertDialogAction {
            class: "dx-alert-dialog-action",
            on_click: props.on_click,
            attributes: props.attributes,
            {props.children}
        }
    }
}

Usage notes

The AlertDialog primitive provides an accessible, composable modal dialog for critical user confirmations (such as destructive actions).

Component Structure

let mut open = use_signal(|| false);
rsx! {
    button { onclick: move |_| open.set(true), type: "button", "Show Alert Dialog" }
    AlertDialog { open: open(), on_open_change: move |v| open.set(v),
        AlertDialogTitle { "Title" }
        AlertDialogDescription { "Description" }
        AlertDialogActions {
            AlertDialogCancel { "Cancel" }
            AlertDialogAction { on_click: move |_| { /* destructive action */ }, "Confirm" }
        }
    }
}

Components

AlertDialog: Provides context, manages open state, renders the backdrop and the content panel.
AlertDialogTitle: The dialog's heading.
AlertDialogDescription: Additional description for the dialog.
AlertDialogActions: Container for action buttons.
AlertDialogAction: Main action button (e.g., confirm/delete). Closes dialog and calls optional on_click.
AlertDialogCancel: Cancel/close button. Closes dialog and calls optional on_click.