Inline Notification

When to use

• Contextual feedback directly related to the content area it sits within - e.g. a form validation summary, a feature status indicator.
• After a user action completes - e.g. saving settings, submitting a request - when a full-page redirect is not appropriate.
• Persistent context that the user should be aware of while interacting with the surrounding content - e.g. read-only mode, degraded service.

When not to use

• Global/page-level alerts - use a Banner component that spans the full viewport width.
• Auto-dismissing feedback - use a Toast component that disappears after a timeout.
• Modal confirmations - use a Dialog when you need to block interaction until the user responds.

States

Dismiss pattern

The component follows the controlled pattern - it emits a dismiss event when the close button is clicked. The consumer decides what to do: remove from DOM, toggle state, animate out, etc.

<!-- Dismissible info notification -->
<diwa-inline-notification
  id="update-notif"
  state="info"
  heading="Update available"
  description="Refresh to get the latest version."
></diwa-inline-notification>

<script>
  const notif = document.getElementById('update-notif');
  notif.addEventListener('dismiss', () => notif.remove());
</script>

import { useState } from 'react';

function SaveBanner() {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <diwa-inline-notification
      state="success"
      heading="Profile saved"
      description="Your changes have been synced."
      ondismiss={() => setVisible(false)}
    />
  );
}

Action button

Set actionLabel to add a secondary action alongside the dismiss button. The button emits the action event when clicked. Use actionLoading to show a spinner while the action is in-progress.

<!-- With action button (Vanilla JS) -->
<diwa-inline-notification
  id="session-notif"
  state="warning"
  heading="Session expiring"
  description="Your session expires in 5 minutes."
  action-label="Extend session"
></diwa-inline-notification>

<script>
  const notif = document.getElementById('session-notif');
  notif.addEventListener('action', () => extendSession());
  notif.addEventListener('dismiss', () => notif.remove());
</script>

Persistent notifications

Set dismissButton={false} to hide the dismiss button for notifications that must remain visible - e.g. read-only mode indicators, mandatory policy notices.

<!-- Persistent (no dismiss button) -->
<diwa-inline-notification
  state="info"
  heading="Read-only mode"
  description="You do not have edit permissions for this workspace."
  dismiss-button="false"
></diwa-inline-notification>

Dos and don'ts