Toast
A status message that surfaces briefly at a corner of the screen.
Triggering
Each .toast is a grid of [icon | content | close], stacked inside a fixed .toast-region at one of six corners. The usual entry point is the imperative API — Stisla.toast(…) and its .success / .error / .promise helpers build the node and mount it in a region (auto-creating one if needed). The base call takes an options object — Stisla.toast({ title, description, variant, action, … }) — while the shortcuts take a title first: Stisla.toast.success("Saved"), .error, .warning, .info. Stisla.toast.promise() shows a spinner that swaps to success or error when the promise settles. Toasts autohide after a few seconds and pause on hover. The Triggering demo below is live; the rest render the markup statically so you can read the anatomy.
Basic
The icon column is required and anchors the layout. The content column stacks a .toast__header and an optional .toast__body; the close chip trails the row. A title-only toast centers vertically.
Intents
An intent modifier shifts only the icon color; the surface stays neutral so a stack of mixed intents still reads as one family.
Timestamp and actions
A .toast__timestamp reads muted next to the title, and a .toast__action row trails the body with follow-up buttons.
Placement
A .toast-region pins the stack to a corner; .toast-region--top-end is the default. Here a real region runs inside the frame.
Customization
These variables retune the toast and its region. Override on the root or any wrapper.
| Variable | Use |
|---|---|
--toast-region-z-index | Overlay stacking order |
--toast-region-gap / -region-inset / -region-max-width | Stack spacing, corner inset, and region width |
--toast-min-width / -max-width | Toast width bounds |
--toast-column-gap / -content-gap | Grid column gap and content stack gap |
--toast-padding-block / -padding-inline | Toast interior padding |
--toast-bg / -color / -border-color | Surface fill, text, and rim |
--toast-radius / -shadow | Corner radius and elevation |
--toast-icon-size / -icon-color | Leading icon size and color (intent modifiers set the color) |
--toast-header-font-size / -header-font-weight | Title type |
--toast-body-font-size / -body-color | Description type |
--toast-close-size / -close-color / -close-bg-hover | Close chip size and paint |
--toast-transition-duration | Enter and exit timing; zeroed under reduced-motion |
Place the region with .toast-region--{top|bottom}-{start|center|end}. Intent modifiers are .toast--primary, .toast--success, .toast--warning, .toast--danger, and .toast--info.