Banner

A floating top-of-viewport notification for global, non-blocking feedback. Supports semantic states, optional action, dismiss behavior, and timed or persistent visibility.

All states

Each example starts closed and is opened explicitly by a button, matching production behavior patterns.

Open Info Banner

<diwa-button-pure id="open-banner">Open Banner</diwa-button-pure>
<diwa-banner id="banner" state="info" heading="Some heading" description="Some description."></diwa-banner>

<script>
  const button = document.getElementById('open-banner');
  const banner = document.getElementById('banner');
  button.addEventListener('click', () => (banner.open = !banner.open));
  banner.addEventListener('dismiss', () => (banner.open = false));
</script>

Open Success Banner

<diwa-button-pure id="open-banner">Open Banner</diwa-button-pure>
<diwa-banner id="banner" state="info" heading="Some heading" description="Some description."></diwa-banner>

<script>
  const button = document.getElementById('open-banner');
  const banner = document.getElementById('banner');
  button.addEventListener('click', () => (banner.open = !banner.open));
  banner.addEventListener('dismiss', () => (banner.open = false));
</script>

Open Warning Banner

<diwa-button-pure id="open-banner">Open Banner</diwa-button-pure>
<diwa-banner id="banner" state="info" heading="Some heading" description="Some description."></diwa-banner>

<script>
  const button = document.getElementById('open-banner');
  const banner = document.getElementById('banner');
  button.addEventListener('click', () => (banner.open = !banner.open));
  banner.addEventListener('dismiss', () => (banner.open = false));
</script>

Open Error Banner

<diwa-button-pure id="open-banner">Open Banner</diwa-button-pure>
<diwa-banner id="banner" state="info" heading="Some heading" description="Some description."></diwa-banner>

<script>
  const button = document.getElementById('open-banner');
  const banner = document.getElementById('banner');
  button.addEventListener('click', () => (banner.open = !banner.open));
  banner.addEventListener('dismiss', () => (banner.open = false));
</script>

With action + dismiss

Use action + dismiss when users need an immediate next step.

Open Action Banner

<diwa-button-pure id="open-banner">Open Banner</diwa-button-pure>
<diwa-banner id="banner" state="info" heading="Some heading" description="Some description."></diwa-banner>

<script>
  const button = document.getElementById('open-banner');
  const banner = document.getElementById('banner');
  button.addEventListener('click', () => (banner.open = !banner.open));
  banner.addEventListener('dismiss', () => (banner.open = false));
</script>

Timed banner

Timed banners open on demand and auto-close after the configured duration.

Open Timed Banner

<diwa-button-pure id="open-banner">Open Banner</diwa-button-pure>
<diwa-banner id="banner" state="info" heading="Some heading" description="Some description."></diwa-banner>

<script>
  const button = document.getElementById('open-banner');
  const banner = document.getElementById('banner');
  button.addEventListener('click', () => (banner.open = !banner.open));
  banner.addEventListener('dismiss', () => (banner.open = false));
</script>

Persistent banner

Persistent banners remain visible until dismissed or manually closed.

Open Persistent Banner

<diwa-button-pure id="open-banner">Open Banner</diwa-button-pure>
<diwa-banner id="banner" state="info" heading="Some heading" description="Some description."></diwa-banner>

<script>
  const button = document.getElementById('open-banner');
  const banner = document.getElementById('banner');
  button.addEventListener('click', () => (banner.open = !banner.open));
  banner.addEventListener('dismiss', () => (banner.open = false));
</script>