01 Notifications — four types, inline format product implementation · Notification.tsx
Notifications use a single body chrome (--component-bg + --line) and tint only the icon. Four severities: info / success / warning / danger. Title is medium-weight; the optional message sits below in secondary text. One primary action max, plus dismiss.
Conversion in progress
We're converting Dune.Part.Two.mkv to MP4 so it plays anywhere. About 2 minutes left.
Transfer complete
tears_of_steel.mkv is ready.
Approaching storage limit
You're at 92% of 1 TB. New transfers will queue once you hit the cap.
Transfer failed
Tracker dropped us after 14s. Try a different magnet.
02 Toast stack — bottom-right overlay
System notifications stack bottom-right, newest on top, auto-dismiss after 6s unless they carry an action. Stack max 3 visible; older ones collapse silently.
Saved
Folder renamed to 2026-Q1.
3 files moved to Trash
Auto-empty in 30 days.
03 Inline banner — top of view
Page-level state that lives inside the content area, above the title. Yellow accent for soft warnings, red for hard errors. Stays put until the underlying state changes — not user-dismissable.
04 Notification dot & badge — minor signals
The dot says "something happened" without specifics. The numeric badge counts unresolved items (transfers in progress, unread shares). Always positioned top-right of the host control.
3
2
12