Gallery

Design a notification component for a product UI, not a marketing alert. It should handle short, time-sensitive updates that appear inline, as a toast, or inside a banner area. Keep the structure consistent across variants so the same message can move between surfaces without redesign.

Show the full notification anatomy: icon or severity marker, short title, body copy, timestamp or recency label, and one optional action such as View, Retry, or Undo. Include clear read, unread, and dismissed states, plus hover and focus states for interactive notifications.

Design for real product clutter: multiple notifications in a stack, truncation for long copy, and a compact layout when space is tight. Make sure the hierarchy is obvious, the alert type is distinguishable, and the component can be scanned quickly without feeling noisy.