Web
Web · Toast stack
Deck
Toasts that stack, fan out and flick away.
A toast stack. New notifications land in front, older ones tuck behind, the stack fans out when you reach for it, and a toast flicks away with the speed of your swipe.
Demo
A recording of the demo. Open it in a new tab
What it does
- 01
Newest in front, older toasts tucked behind; hover or focus fans them out
- 02
Swipe to dismiss uses release velocity, with rubber-banding the wrong way
- 03
Success, error, action and promise toasts with a loading state
- 04
Errors are alerts, the rest polite status; timers pause while you read
Use it
git clone https://github.com/YagnikBarasiya23/deck-toast-stack.git
# copy deck.js and deck.css into your project<link rel="stylesheet" href="deck.css">
<script type="module">
import Deck from './deck.js';
const toasts = new Deck({ position: 'bottom-right' });
toasts.success('Changes saved');
toasts.error('Upload failed', {
message: 'report.pdf is larger than 10 MB.',
action: { label: 'Retry', onClick: retry },
});
toasts.promise(publish(), {
loading: 'Publishing…',
success: count => `Published to ${count} feeds`,
error: 'Publishing failed',
});
</script>Every option, the technique behind the motion and the accessibility notes are in the README on GitHub
More components
All 10- Web
Get in touch
Open for freelance projects, contract roles and collaborations — mobile apps and full-stack products in particular. WhatsApp gets the fastest reply.
- Phone
- +91 70488 09875
- Based in
- Rajkot, Gujarat, India
- Elsewhere