Index › Patterns › Notifications
4 surfaces
How the system reports back.
Four surfaces for one job — telling the practice what just happened. A page banner for system-wide notices, an inline note in context, a transient toast in the corner, and the notification center where everything is kept. Colour never carries the message alone; every hue is paired with an icon and words.
NotificationBanner spans the page top with variant · message · optional action · onDismiss. role="alert". Amber = warning; the only accent here is the real CTA button.
NotificationInline sits beside the field it concerns — variant · message, bordered, single line, role="status". Rust = error; no dismiss, no action — it stays until the cause is fixed.
Toaster mounts once at the root; toast.success() fires a transient confirmation that auto-dismisses. Moss = success. Stacks bottom-right — quiet, never blocking the work.
NotificationCenter = NotificationBell (unread Badge) + NotificationPanel. Items carry a type kicker, an unread dot, agent + relative time, and a Mark all read action. Read rows recede to secondary.
Match the surface to the urgency. A banner for practice-wide notices, an inline note where the problem lives, a toast for fire-and-forget confirmations, and the center for anything that must wait to be read. One event, one surface — never all four at once.
