Overview

mates-ui ships an imperative snackbar system. Notifications live in a reactive store and render into a fixed overlay appended to <body> on the first call — no provider to mount.

Use snackbarAtom for full control (add, dismiss, clearAll) or toast.* for one-liner variants.

Variants

Variant
Look
When
default / info Inverse surface Neutral or contextual feedback
success Green Completed actions
error Red Failures
warning Orange Attention / risk

SnackbarOptions

import { snackbarAtom } from 'mates-ui';

snackbarAtom.add('Hello', 'default', {
  ttl: 6000,              // ms; -1 = never auto-dismiss
  id: 'unique-key',       // dedupe / replace
  dismissible: true,      // show × button
  position: 'bottom-center', // top/bottom × left/center/right
  action: {
    label: 'Undo',
    onClick: () => {},
  },
});

Toast playground

Fire each variant, pin a persistent info toast, then dismiss or clear all.

import { html, renderApp } from 'mates';
import { toast, snackbarAtom } from 'mates-ui';

const App = () => {
return () => html`
<div class="m-flex m-flex-wrap m-gap-sm">
<button @click=${() => toast.success('Saved!')}>Success</button>
<button @click=${() => toast.error('Failed')}>Error</button>
<button @click=${() => toast.warning('Low disk')}>Warning</button>
<button @click=${() => toast.info('Syncing…', { ttl: -1, id: 'sync' })}>
Persistent info
</button>
<button @click=${() => snackbarAtom.dismiss('sync')}>Dismiss sync</button>
<button @click=${() => snackbarAtom.clearAll()}>Clear all</button>
</div>
`;
};

renderApp(App, document.getElementById('app'));