A toast is short-lived feedback on something the user just did: saved, copied, failed. It slides in, says its piece and leaves without blocking the page.
How to show a toast from script and the CSS behind it. The files are eco-design-system/notifications.css and notifications.js.
Link the shared files once per page. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/eco-design-system/notifications.css"> and <script src="/eco-design-system/notifications.js"></script>. Link button.css first. |
| 2. Show a toast | Call ECO_N.showToast({ status, text }). The script adds the fixed host, the slide and the dismissal. |
| 3. Choose | Status info | success | warning | error. Emphasis weak (default) or strong (sparingly). |
| 4. Actions | Optional: actions.primary and actions.secondary as buttons, or actions.links as inline links. |
| 5. Auto-hide | autoHide: 4000 for a confirmation. Leave it out for a Warning or an Error. |
The markup has no motion. The slide is set in Motion on Examples & Guidelines.
| Setting | Use |
|---|---|
status | info (default), success, warning, error. |
emphasis | weak (default) or strong. |
title, text | Optional title and the text. |
icon | Informational only: a Material Symbols name, shown as Outlined. |
actions | { primary, secondary } (each { label, onClick }) or { links: [{ label, onClick }] }. |
autoHide | Milliseconds; 0 or empty = stays until dismissed. |
| Name | Use |
|---|---|
--toast-in-ease, --toast-in-duration | Enter. Defaults: ease-decelerate-emphasized, duration-medium-2. |
--toast-out-ease, --toast-out-duration | Exit. Defaults: ease-accelerate-generic, duration-medium-2. |
showToast replaces the current one.<html> or on .toast-host.ECO_N.dismissToast() closes the current toast.button.css is on the page.The component is one CSS file and one script, shared by every notification. Link them, never copy them. The code below is read from the files the page links, so it is always what you see.