Toast notifications for Astro — stacked, auto-dismissing, accessible. Zero dependencies. One
<Toast />mount + awindow.toast()global, view-transition safe.
npm install @arraypress/toast-astroThe vanilla package is a peer dependency for its types + canonical stylesheet. The runtime is inlined in the component's script, so you don't need a bundler to pull it into client code.
---
// src/layouts/Layout.astro
import '@arraypress/toast-astro/style.css';
import { Toast } from '@arraypress/toast-astro';
---
<html>
<body>
<slot />
<Toast />
</body>
</html>Then from any client <script> (or any component using client:load,
client:visible, etc.):
window.toast('Saved');
window.toast.success('Added to wishlist');
window.toast.info('Synced 3 minutes ago');
window.toast.warning('Some items skipped');
window.toast.error('Save failed', { duration: 5000 });
window.toast.clear();| Prop | Default | Description |
|---|---|---|
hostId |
'ap-toast-host' |
DOM id for the host element. |
classPrefix |
'toast' |
Class-name prefix. Match against the stylesheet you ship. |
exposeGlobal |
true |
Wire window[globalName] to the manager. Set false to opt out. |
globalName |
'toast' |
Name of the global if exposed. |
persist |
true |
Survive Astro view transitions. |
class |
— | Extra classes appended to the host element. |
icons |
built-in SVGs | Per-variant icon HTML override. |
The package ships an ambient declaration for window.toast — once
the component is mounted, calls like window.toast.success('done')
typecheck without further setup.
MIT