Getting started

One import, one call:

npm install @devix-labs/toast

import { toast } from '@devix-labs/toast';
import '@devix-labs/toast/styles.css';

toast.success('Saved');

There is nothing to mount. The first toast builds the region it needs, in the browser's top layer, so no z-index, no wrapper, and nothing hidden behind a modal.

Or from the CDN, with no build step:

<link rel="stylesheet" href="https://www.devix.pk/cdn/oss/toast@1.0.0/toast.min.css">
<script type="module">
  import { toast } from 'https://www.devix.pk/cdn/oss/toast@1.0.0/index.js';
  toast('Saved');
</script>

The calls#

toast('Plain message');
toast.success('Saved', { description: 'Your changes are live.' });
toast.error('Could not save', { description: 'The server said no.' });
toast.warning('Almost out of space');
toast.info('A new version is available');
const id = toast.loading('Uploading…');       // stays until you change or dismiss it

toast.update(id, { type: 'success', message: 'Uploaded' });
toast.dismiss(id);                            // one
toast.dismiss();                              // all of them

A promise, start to finish#

toast.promise(saveDraft(), {
  loading: 'Saving…',
  success: (draft) => `Saved “${draft.title}”`,
  error: (error) => error.message,
});

One toast turns from loading into success or error in place — and the promise still resolves or rejects for your own code.

An action people can undo#

toast('Message deleted', {
  action: { label: 'Undo', onClick: () => restore(message) },
  cancel: { label: 'Dismiss' },
  duration: 8000,
});

Returning false from onClick keeps the toast open — useful while a retry is in flight.

Settings#

import { configure } from '@devix-labs/toast';

configure({
  position: 'top-center',   // six positions
  max: 3,                   // on screen at once; the rest queue
  duration: 4000,           // errors default to 6000
  expand: true,             // the stack fans out on hover
  closeButton: true,
  theme: 'auto',            // follows your page
});

What it does without being asked#

• Pauses while you hover it, while focus is inside it, and while the tab is in the background — so a toast is never spent on an empty screen.
• Stacks: newest in front, older ones tucked behind, fanning out when you hover.
• Queues past max, so a burst of twenty never covers the page.
• Swipes away with a pointer or a thumb.
• Announces itself politely, or assertively for errors.
• Stays usable over a modal <dialog> — the toasts move inside it, because a modal makes everything outside it inert.