Toast
Temporary notifications. Mian.toast() from script, or data-mn-toast on a button. Pause on hover, stack, dismiss.
Triggers
<button class="mn-btn mn-btn-outline" data-mn-toast="Event created" data-mn-toast-description="Sunday, 14 December at 09:00">Default</button>
<button class="mn-btn mn-btn-outline" data-mn-toast="Saved" data-mn-toast-description="Your changes are live." data-mn-toast-color="success">Success</button>
<button class="mn-btn mn-btn-outline" data-mn-toast="Could not connect" data-mn-toast-description="Check your network and try again." data-mn-toast-color="danger">Error</button>From script, with an action
<button class="mn-btn" onclick="Mian.toast({ title: 'Message archived', action: { label: 'Undo', onClick: () => Mian.toast({ title: 'Restored', color: 'success' }) } })">Archive</button>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/toast.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| Mian.toast({ title, description, color, duration, action, position }) | Creates a toast. Returns { dismiss, element }. |
| data-mn-toast="Title" | Declarative trigger; add data-mn-toast-description and data-mn-toast-color. |
| mn-toaster[data-position] | bottom-right (default), top-right, top-center, bottom-center. |
Accessibility
- The toaster is a polite live region; danger toasts use role="alert". Timers pause on hover and focus so there is time to read and act.
- Never put the only path to an action in a toast.