System messages with severity, action and dismissal.
| Prop | Type | Notes |
|---|---|---|
| severity | info · success · warning · error | Tone, icon and ARIA live-ness |
| style | filled · bar | Tinted fill, or panel + coloured left bar |
| title | string | Optional short summary above the message |
| actions | ReactNode | Optional resolving buttons — primary + ghost |
| onDismiss | () => void | Present ⇒ a close × is shown |
| duration | number = 5000 | Auto-dismiss for toasts; 0 keeps it until closed |
| Event / Key | Result |
|---|---|
| role | status for info/success (polite) · alert for warning/error (assertive) |
| Esc | Dismisses the focused notification |
| onDismiss | Fires on × click or auto-dismiss timeout |
A notification is how an optimistic action reports back: render the result at once, then confirm on reconcile or roll back with an error the reader can act on. Auto-dismiss the good news; let errors persist until acknowledged.
Give errors a way out. A retry or a next step beats a dead end.
Don't surface raw codes with no action. Say what happened and what to do.
Auto-dismiss the good news. Success should confirm, then get out of the way.
Don't stack many at once. Collapse or queue them so one reads at a time.
Corner toast confirming an optimistic action.
Bar-accent banner at the top of a page.
A stacked list in an inbox panel.
| Token | Value | Role |
|---|---|---|
| --notif-info | #3E63DD | Info tone (icon #6B8AFF) |
| --notif-success | #1FA35C | Success tone (icon #4FCE8B) |
| --notif-warning | #FFB020 | Warning tone (icon #FFC457) |
| --notif-error | #EB4A4F | Error tone (icon #F2777B) |
| --notif-pad | 14px 16px | Card padding |
| --notif-radius | 10px | Corner radius |
| --notif-bar | 3px | Bar-accent left border width |
| --notif-duration | 5000ms | Default toast auto-dismiss |
<div class="o-notif o-notif--warning" role="alert">
<span class="o-notif__icon"><!-- severity icon --></span>
<div class="o-notif__body">
<div class="o-notif__title">Verification required</div>
<div class="o-notif__text">Confirm your email to unlock publishing.</div>
<div class="o-notif__actions">
<button class="o-btn o-btn--sm">Verify now</button>
<button class="o-btn o-btn--sm o-btn--ghost">Later</button>
</div>
</div>
<button class="o-notif__close" aria-label="Dismiss">×</button>
</div>