Alert

A bordered box for a message, with a title and a description.

Result

alert.rs

use hypersig::html::{div, when};
use hypersig::style::pattern::stack;
use hypersig::style::value::rem;
use hypersig::{Page, Signals};
use hypersig_ui::{
    AlertVariant, ButtonSize, ButtonVariant, alert, alert_description, alert_title, button,
};
use serde::{Deserialize, Serialize};

#[derive(Signals, Serialize, Deserialize)]
pub struct Builds {
    failed: bool,
}

pub fn page() -> Page<Builds> {
    let failed = Builds::failed();
    Page::new(
        "Builds",
        Builds { failed: false },
    )
    .child(
        div()
            .css(stack(rem(1)))
            .child(
                alert(AlertVariant::Default)
                    .child(alert_title().text("Deployments are paused"))
                    .child(alert_description().text("They resume at 18:00 UTC.")),
            )
            .child(when(
                failed,
                alert(AlertVariant::Destructive)
                    .child(alert_title().text("Build failed"))
                    .child(alert_description().text("The last commit does not compile.")),
            ))
            .child(
                div().child(
                    button(ButtonVariant::Outline, ButtonSize::Sm)
                        .on_click(failed.toggle())
                        .text("Toggle the error"),
                ),
            ),
    )
}

Accessibility

Both variants are live regions. A destructive alert has role="alert", which a screen reader reads when it is put on the page, as the demo does with when. A default alert has role="status", which is read when its text changes. Some screen readers skip a status that arrives with its text already in it, so keep a status box on the page and change its text with bind_text.

API

Item	Summary
`alert`	A bordered box for a message, holding an `alert_title` and an `alert_description`.
`alert_title`	The first line of an `alert`.
`alert_description`	The text under the title of an `alert`.
`AlertVariant`	The look and the urgency of an alert.