Skip to content
Qirava lowercase logo

Quill docs

Alert

An inline status banner that announces itself (role=alert). Its primary axis is severity (info, success, warn, danger), each with a tone-colored accent; the surface effect and corner radius are orthogonal. Use the severity that matches the message — never danger for decoration.

Preview#

Each severity (info, success, warn, danger) with its accent, plus the surface-effect axis.

severity
effect

Playground#

Change the controls — the preview and the snippet update live.

Severity
Effect
Radius
Alert::new(Severity::Info, "Your changes have been saved.")
    .title("Info")
    .effect(Effect::Flat)
    .radius(Radius::Md)
    .render()

Theme it#

Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.

Density
Radius
Surface
Motion
// This demo is scoped: these axes apply only to this preview.
el("div")
    .attr("data-q-size", "cozy")
    .attr("data-q-radius", "rounded")
    .attr("data-q-surface", "flat")
    .attr("data-q-motion", "smooth")
    .child(
        Alert::new(Severity::Info, "Your changes have been saved.")
            .title("Info")
            .effect(Effect::Flat)
            .radius(Radius::Md)
            .render()
    )

Code#

Construct the component with its builder:

Alert::new(Severity::Success, "Your changes have been saved.")
    .title("Saved")
    .effect(Effect::Flat)
    .radius(Radius::Md)
    .render()