Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Basic

A simple alert dialog for confirming an action.

Destructive

An alert dialog for confirming a destructive action like deleting data.

Open Markdown
FreeAlert Dialog

Accessible confirmation flows.

Install with the Proa CLI
proa ui add alert_dialog

Installs the reviewed component source, dependencies, shared support files, and required legal notices.

CLI and registry setup
recipe.rs
// SPDX-FileCopyrightText: 2026 Proa Labs, Inc.
// SPDX-License-Identifier: MIT OR Apache-2.0

//! Alert Dialog recipe — one const named-slot table for every public part.
//!
//! Static modal primitives are sourced from Dialog where the two components
//! are visually identical. Alert-specific action and cancel controls remain
//! local to this recipe.

use crate::components::dialog::{DialogSize, DIALOG_RECIPE, DIALOG_SIZE_MD};
use crate::tw_join;

const ALERT_DIALOG_ROOT: &str = "group/alert-dialog";
const ALERT_DIALOG_CONTENT: &str = tw_join!(DIALOG_RECIPE.content, DIALOG_SIZE_MD);

const ALERT_DIALOG_ACTION: &str = tw_join!(
    "inline-flex",
    "items-center",
    "justify-center",
    "gap-2",
    "whitespace-nowrap",
    "rounded-md",

Search

Type at least 2 characters

Customize

Make it yours

Palette

Radius

Overview
Components
Settings

Build your own

Themed Proa UI surface

Preview
Components52
RecipesTyped
customer-portal