Alert

Anatomy

Prominent callout or banner for important messages, with optional icon, description, and action slot.

maud_ui::primitives::alert

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`title`	`String`	`""`	Alert title text
`description`	`Option<String>`	`None`	Optional description text
`variant`	`Variant`	`Default`	Visual variant (color scheme)
`icon`	`bool`	`true`	Whether to show the icon (default true)
`action`	`Option<Markup>`	`None`	Optional action slot (shadcn AlertAction) — rendered top-right

Examples

Subscription expiring

Your Pro plan expires in 3 days

Renew by Apr 19 to keep unlimited builds and priority support. After expiry your workspace drops to the Free tier and projects over 3 will be archived.

Two-factor enabled

Two-factor authentication is on

Backup codes were emailed to invoice@geldentech.ca. Store them somewhere safe — you'll need one if you lose access to your authenticator.

Destructive — API key revocation

Revoke key sk_live_…A9f2?

Any services using this key will stop working immediately. This action cannot be undone — you'll need to issue a new key and redeploy.

Informational

Scheduled maintenance Sunday 02:00 UTC

The build pipeline will be paused for roughly 20 minutes. In-flight deploys will resume automatically once maintenance completes.

With action — deletion undo

Project "atlas" was archived

It will be permanently deleted in 30 days. You can restore it from the Trash until then.

Usage and composition

Import

use maud_ui::primitives::alert::{self, Variant, Props};

Example

use maud::html;
use maud_ui::primitives::alert;

html! {
    (alert::render(alert::Props {
        title: "System maintenance".to_string(),
        description: Some("API will be offline from 2–3 AM UTC.".to_string()),
        variant: alert::Variant::Warning,
        icon: true,
        action: None,
    }))
}

Variants

Variant	Icon	Meaning
Default	○ (circle)	Neutral informational message.
Info	ⓘ (circled i)	Informational message.
Success	✓ (checkmark)	Positive confirmation or success.
Warning	⚠ (triangle)	Caution or warning requiring attention.
Danger	⚠ (triangle)	Destructive action or error state.

Helper Functions

alert::action(children: Markup) -> Markup — Wraps arbitrary markup in the action slot container (top-right) for use with Props { action: Some(...) }.

Badge, Button, Toast.

Shadcn reference

https://ui.shadcn.com/docs/components/base/alert

Accessibility

Emits role="alert" so screen readers announce the message immediately.
Icon marked aria-hidden="true" to avoid redundant announcement.
Title and description are plain text content, no special ARIA needed.

← Back to Gallery