Attention — Banner
Anatomy
A supplied operational message with one contextual action. Warning, danger and information tones share the same compact geometry.
maud_ui::blocks::attention_banner
Props
Generated from public Rust fields. Defaults are evaluated from the implementation.
| Prop | Type | Default | Description |
|---|---|---|---|
state | crate::blocks::state::State | Ready | Explicit presentation state; Ready preserves the ordinary content. |
title | String | "" | No description |
subline | Option<String> | None | No description |
action | Option<Action> | None | No description |
action_markup | Option<Markup> | None | No description |
tone | Tone | Warning | No description |
dismiss | Option<Dismiss> | None | No description |
Examples
light · fictional example
Open arrivalsdark · fictional example
Open arrivalsLoading, empty, error and disabled
Each example uses the block’s state prop. Empty and error are separate outcomes.
Usage and composition
Import and example
use maud_ui::blocks::{action::Action, attention_banner::{self, Props, Tone}};
attention_banner::render(Props {
title: "Maya Chen arrives at 11:30 with CAD $560 due".into(),
subline: Some("Review payment before completing check-in.".into()),
action: Some(Action::link("Review payment", "/bookings/14/payment")),
tone: Tone::Warning,
..Default::default()
});
Dismiss { label: String, focus_target: Option<String> } defaults to "Dismiss notice" and None. focus_target is the ID of a visible focusable element outside the banner. Without it, focus moves to the next available control, then the previous one, then the parent region. Tone::as_str() returns warning/danger/info.
Related
Money, grouped worklist, alert.
Presentation states (0.10.1)
Props::state: maud_ui::blocks::state::State defaults to Ready. Loading { message } shows skeletons; Empty { message, action } and Error { message, retry } provide distinct recovery paths; Disabled { reason } retains admitted content in an inert subtree with an external reason. Loading, empty and error omit ready content. Inert disables interaction, not server authorization or submission of values by an enclosing form. Each live API page shows all four states together. Add state: Default::default() to exhaustive Props literals.
State::Absent (0.11.0) means no input/rule was declared and emits nothing. Keep any caller-owned section heading inside the same conditional. Use Error only for a declared operation that failed; never show an unconfigured-rule message to the user.
Accessibility
The message is a named aside, with plain text conveying meaning alongside tone. Static notices are not assertive alerts. The action remains usable without JavaScript. A dismiss button is hidden until enhancement is initialized; without JS the notice stays visible. Dismissal hides only this DOM instance, does not write storage or acknowledge business state, and moves focus out of the hidden notice. HTMX-inserted instances use the shared initializer. Required disclosures should never opt into dismissal.
The body and action wrap on phones; light/dark semantic tokens provide surfaces, text and borders. Touch dismissal and actions have a 44px minimum target. The application supplies all balances, readiness and arrival claims; the component derives none of them.