Components
Feedback
Tell people what happened, in the right place: a toast when something worked, an alert when they should read before acting, progress while they wait.
Toasts
Bottom-centre, dark, never more than four. They pause while you hover and slide away on their own. Errors stay longer.
Archived batches: 0
Alerts
In the flow of the page, next to what they are about. Four tones with fixed meanings.
Bank feed connectedNew payments appear here every 15 minutes.
All supplier bills paidNothing is due this week.
2 invoices overdueMarina Clinic and Costa Family are 30+ days late.
Payment failedThe card ending 4421 was declined. Update it to keep the van loan current.
Progress
A bar when you know how far along it is; a ring when you don't.
Uploading0%
Work done64%
Budget used59%
Over budget100%
Paid100%
Checking the bank feed…
Props
| Prop | Values | Default | What it does |
|---|---|---|---|
toast(message, opts) | tone · detail · action { label, run } · duration | 4s / 7s errors | Show a toast; returns its id |
Alert tone | 'info' | 'ok' | 'warn' | 'bad' | 'info' | Meaning and colour |
Alert action / dismissable | snippet · boolean | — | A button inside; a × to close |
Progress value / tone | 0–100 · 'blue' | 'orange' | 'red' | 'green' | 0 · 'blue' | How far, and what it measures |