Toast stack

Notifications that stack, then get out of the way.

New toasts land in front and older ones tuck behind. Hover or tab in and the stack fans out, with every timer paused. Swipe one sideways — a slow drag springs back, a quick flick sends it off.

Try it

Press Alt + T to jump to the newest toast, Esc to dismiss it.

Setup

Position Visible in stack 3 Duration 5.0 s

Use it

<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: 'Published' });
</script>