Home/Patterns/Notifications

Notifications

Three surfaces — toasts, popover, inbox — across five composition scenarios.

Stable5 compositions
COMPOSITION 01

Toast stack · operator

Bottom-right stack. Max 3 visible; auto-dismiss 5 s. Used for transient confirmations.

Use whenShowing the operator that a routine action they just took has completed.
Receipt R-19281 printed
Auto-reorder placed for Pro-bake bread
Cash variance — $ 240 over tolerance
COMPOSITION 02

Popover · topbar trigger

Bell icon opens an 8-item recent feed. Unread items are tinted brand-soft.

Use whenThe operator wants to glance at recent system activity without leaving the current surface.
Notifications · 14 unreadMark all read
Cash variance over tolerance
Park Centre · Till 02 · 2m
Auto-reorder placed
Long-life milk · 12 units
Receipt R-19281 printed
Faith Moyo · 18m
Mai Ndlovu joined
Bursar · 1h
COMPOSITION 03

Inbox · full page

Filters by status (Unread · All · Mentions) and source. Full-page surface for catching up.

Use whenThe operator has been away or needs the full backlog rather than a recent slice.

Inbox · 14 unread

Cash variance over tolerance
Counted cash $ 240 below expected. Supervisor sign-off required.
2m
Auto-reorder placed · Long-life milk
12 units ordered from Dairibord at $ 0.95 each.
14m
Mai Ndlovu joined Mukamba Group
Invited by Robert Mukamba · role Bursar.
1h
COMPOSITION 04

Grouped digest · system status

When 20+ similar events fire in a short window, group them. "12 receipts printed in the last hour" beats 12 separate entries.

Use whenA high-frequency event would flood the inbox if shown individually.
12 receipts printed
Park Centre · since 14:00
12 events · expand
3 deliveries received
Greendale yard · since 13:30
3 events · expand
Auto-reorder placed
Long-life milk · Glen Lorne
single event
COMPOSITION 05

Channel preferences

Per-source channel routing — email, in-app, push, none. A grid where each row is a notification type and each column is a delivery method.

Use whenLetting the operator tune their notification load. Settings · Notifications.
TypeIn-appEmailPush
Receipt posted
Refund needs approval
Cash variance over tolerance
Stock-out forecast
New employee joined
Payroll posted

Shared rules

Do

Send a toast for events the user just caused. Send an inbox item for things that happened to them.

Don't

Mix transactional and marketing notifications.

Do

Group repetitive notifications when they cross 5 events in 10 minutes.

Don't

Show a red dot on the bell unless there is a real unread.