Alert
Keep important feedback visible within the page.
use blinc_cn as cn;
use blinc_layout::prelude::*;
pub fn alert_demo() -> Div {
div()
.class("demo-wide")
.child(cn::alert("Your changes have been saved.").variant(cn::AlertVariant::Success))
.child(
cn::alert_box()
.variant(cn::AlertVariant::Warning)
.title("A little heads up")
.description("Your trial ends in seven days."),
)
}
@layer components {
.cn-alert,
.cn-alert-box {
font-family: var(--font-sans);
}
.cn-alert,
.cn-alert-box {
line-height: var(--leading-normal);
}
.cn-alert {
background: var(--cn-alert-bg, var(--surface));
border: 1px solid var(--cn-alert-border, var(--border));
border-radius: var(--radius-default);
color: var(--text-primary);
font-size: var(--text-sm);
padding: var(--space-4);
}
.cn-alert-box {
background: var(--cn-alert-bg, var(--surface));
border: 1px solid var(--cn-alert-border, var(--border));
border-radius: var(--radius-default);
color: var(--text-primary);
font-size: var(--text-sm);
padding: var(--space-4);
gap: var(--space-3);
}
.cn-alert--success {
background: var(--success-bg);
border-color: var(--success);
color: var(--success);
}
.cn-alert--warning {
background: var(--warning-bg);
border-color: var(--warning);
color: var(--warning);
}
.cn-alert--error {
background: var(--error-bg);
border-color: var(--error);
color: var(--error);
}
.cn-alert--info {
background: var(--info-bg);
border-color: var(--info);
color: var(--info);
}
}
Usage and properties
Keep important feedback visible within the page. Apply CSS after the component layer to restyle the documented parts.
Use the installation guide to add blinc_cn and its component stylesheet. Create the fixture bindings once, and return the demo from your UI builder. Values marked Bound accept Signal/Computed sources where the API supports them; structural options configure the component at construction.
| Property | Type | Update model | This example |
|---|---|---|---|
title / description | strings | Construction | Informational and warning messages |
variant | AlertVariant | Construction | See the compiled example |
Keyboard and interaction
Informational content; no activation or Tab stop is required.
Customizing it
Add application CSS after the default component layer. These selectors are the restyling surface for this component:
.cn-alert.cn-alert-box
Theme and component variables: --primary, --text-primary, --text-secondary, --surface, --border, --radius-default, --duration-fast, --ease-state.
Built-in themes
The Live theme control installs Blinc's own theme bundles, including their colours, focus rings, corner shapes and motion tokens.
pub fn theme_bundle_for(name: &str) -> blinc_theme::ThemeBundle {
match name {
"restrained" => blinc_theme::RestrainedTheme::bundle(),
"expressive" => blinc_theme::ExpressiveTheme::bundle(),
_ => blinc_theme::HybridTheme::bundle(),
}
.with_css(blinc_cn::cn_styles::CN_STYLES)
}Download the default widget and component stylesheets. Sample assets and licenses are available in the asset guide.
Documentation
From the canonical component guide.
alert(message) displays a single message. alert_box() adds a title and
description:
alert("Your changes are ready to save.")
alert_box()
.title("Heads up!")
.description("Review the details before continuing.")
Variants
Both accept Default, Success, Warning or Destructive:
div().flex_col().gap(2.0)
.child(alert("Saved").variant(AlertVariant::Success))
.child(alert("Low disk space").variant(AlertVariant::Warning))
.child(alert_box()
.variant(AlertVariant::Destructive)
.title("Upload failed")
.description("Check your connection and try again."))
Messages, titles and descriptions can bind to Signals or Computeds. The root
is .cn-alert or .cn-alert-box, with a variant class such as
.cn-alert--success or .cn-alert--error. Restyle those rules rather than
picking colours in the component builder.
Platforms and version
The component API is available in Blinc 0.6.0. The Live example runs in a dedicated worker and requires a compatible GPU surface. Preview and Code remain available when Live cannot start. The canvas has a descriptive label; a full screen-reader DOM mirror is not provided. The gallery integration is based on revision e2e55c24e078.
Recordings and live demos use the default Hybrid theme with bundled Noto Sans. The recording uses a 560 × 320 logical viewport at twice that resolution. Live follows its container and actual display density. Source base revision · Exact build source · Artifact versions and checksums · Font license.