Open experiment
Comet toast stack
A compact feedback stack that demonstrates timed notifications without sacrificing control. Toasts arrive with bounded comet tails, expose individual dismiss buttons, and pause their progress indicator whenever a user hovers or focuses them.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<div class="cmp-comet-toasts">
<div class="cmp-comet-toasts__head">
<strong>Signal queue</strong><button type="button" data-replay>Replay toasts</button>
</div>
<div class="cmp-comet-toasts__stack" aria-live="polite" aria-label="Notifications">
<article data-tone="success">
<i aria-hidden="true">✓</i
><span
><strong>Changes launched</strong><small>Your component is live in preview.</small></span
><button type="button" aria-label="Dismiss Changes launched">×</button
><b aria-hidden="true"></b>
</article>
<article data-tone="info">
<i aria-hidden="true">↻</i
><span><strong>Cloud sync complete</strong><small>14 assets are now up to date.</small></span
><button type="button" aria-label="Dismiss Cloud sync complete">×</button
><b aria-hidden="true"></b>
</article>
</div>
</div>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The stack is a polite live region.
- Every toast provides a named dismiss button.
- Hover and focus pause the visual timeout indicator.
License: MIT License for open-source use, modification, and distribution.