Toast
Confirm a completed action without interrupting the workflow.
use blinc_cn as cn;
use blinc_layout::prelude::*;
pub fn toast_demo() -> Div {
div().class("demo-stack").class("demo-stack--center").child(
cn::button("Save changes")
.variant(cn::ButtonVariant::Outline)
.on_click(|_| {
cn::toast_success("Changes saved")
.description("Your workspace is up to date.")
.show();
})
.build_component()
.id("demo-action"),
)
}
@layer components {
.cn-toast {
font-family: var(--font-sans);
}
.cn-toast {
background: var(--cn-toast-bg, var(--surface));
border: 1px solid var(--cn-toast-border, var(--border));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
color: var(--text-primary);
}
.cn-toast[data-variant="success"] {
border-color: var(--success);
}
.cn-toast[data-variant="warning"] {
border-color: var(--warning);
}
.cn-toast[data-variant="destructive"] {
border-color: var(--error);
}
.cn-toast[data-variant="success"] .cn-toast-icon {
color: var(--success);
}
.cn-toast[data-variant="warning"] .cn-toast-icon {
color: var(--warning);
}
.cn-toast[data-variant="destructive"] .cn-toast-icon {
color: var(--error);
}
.cn-toast-title {
color: var(--text-primary);
}
.cn-toast-description {
color: var(--text-secondary);
}
.cn-toast-close {
border-radius: var(--radius-sm);
color: var(--text-secondary);
}
.cn-toast-close:hover {
color: var(--text-primary);
}
@keyframes cn-slide-from-right {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes cn-slide-to-right {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@keyframes cn-slide-from-left {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes cn-slide-to-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.cn-toast-motion-right[data-motion="enter"] {
animation: cn-slide-from-right var(--duration-normal) var(--ease-sheet);
}
.cn-toast-motion-right[data-motion="exit"] {
animation: cn-slide-to-right var(--duration-fast) var(--ease-in) forwards;
}
.cn-toast-motion-left[data-motion="enter"] {
animation: cn-slide-from-left var(--duration-normal) var(--ease-sheet);
}
.cn-toast-motion-left[data-motion="exit"] {
animation: cn-slide-to-left var(--duration-fast) var(--ease-in) forwards;
}
}
Usage and properties
Confirm a completed action without interrupting the workflow. 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 | Saved notification |
variant | toast helper | Construction | toast_success |
Keyboard and interaction
Use the control’s documented keyboard commands; Tab reaches enabled controls and :focus-visible marks keyboard focus.
Customizing it
Add application CSS after the default component layer. These selectors are the restyling surface for this component:
.cn-toast.cn-toast-icon.cn-toast-title.cn-toast-description.cn-toast-close
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.
Show notifications from an event or application callback:
button("Notify").on_click(|_| {
toast("Success")
.description("Your changes have been saved.")
.show();
})
toast_success, toast_warning and toast_error select variants directly.
.duration_ms(..) sets the lifetime; .persistent() waits for dismissal.
.corner(..) sets the tray corner. .show() returns a handle whose
.dismiss() method removes that toast.
With an Action
let undone = ctx.use_signal(false);
button("Create event").on_click(move |_| {
toast("Event created")
.description("The event is on your calendar.")
.action("Undo", move || undone.set(true))
.duration_ms(5000)
.show();
})
Styling and Motion
The root is .cn-toast with data-variant: default, success, warning
or destructive. Parts include .cn-toast-icon, .cn-toast-title,
.cn-toast-description and .cn-toast-close. Set --cn-toast-bg and
--cn-toast-border to override their defaults.
The wrapper is .cn-toast-motion-right or .cn-toast-motion-left, depending
on its corner. It carries data-motion="enter" or "exit" and remains
mounted until the exit completes:
.cn-toast-motion-right[data-motion="exit"] {
animation: cn-slide-to-right 400ms var(--ease-in) forwards;
}
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.