Patterns: Notifications

Prerequisites

• - Severity model (info, success, warning, error) documented by product.
• - Component mapping for inline notifications versus toasts.
• - Action policy for undo/retry/escalation flows.

Step 1: Pick channel by context

Inline notifications belong near related content; toasts are for global, transient feedback.

const channel = {
  inline: 'Use when message is tied to a specific form or section.',
  toast: 'Use for app-level confirmations and short-lived updates.',
};

Step 2: Use semantic variants and concise content

Keep heading and description clear so users can act quickly.

<diwa-inline-notification
  variant="warning"
  heading="Session expiring soon"
  description="Save your work to avoid losing edits."
></diwa-inline-notification>

Step 3: Support recovery actions

Provide an action when users can undo, retry, or open additional detail.

<diwa-toast
  heading="Item archived"
  description="You can undo this action for 30 seconds."
  action-label="Undo"
></diwa-toast>

Step 4: Respect motion and dismissal expectations

Reduce animation for users with reduced-motion preferences and avoid disappearing critical errors too quickly.

@media (prefers-reduced-motion: reduce) {
  .notification-enter,
  .notification-exit {
    animation: none;
  }
}

Implementation Notes

• - Critical errors should remain visible until user dismissal or resolution.
• - Use polite live-region behavior for non-critical toasts to reduce screen reader interruption.
• - Keep notification timing consistent across app areas.

Troubleshooting

• - If users miss toasts, increase visibility duration or provide inline redundancy for important updates.
• - If message volume feels noisy, consolidate repeated events into a single summary notification.
• - If notifications overlap interactive controls, adjust placement and stacking rules.

Next Actions