Notification Base

Fetch pattern JSON: curl https://webspire.de/patterns/notification/base.json

base.html

<div class="ws-notification mx-auto max-w-sm rounded-xl border border-[var(--ws-notification-border)] bg-[var(--ws-notification-bg)] p-4 shadow-lg">
  <div class="flex items-start gap-3">
    <div class="flex-shrink-0 rounded-full bg-[var(--ws-notification-accent)]/10 p-2 text-[var(--ws-notification-accent)]">
      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/></svg>
    </div>
    <div class="min-w-0 flex-1">
      <p class="text-sm font-semibold text-[var(--ws-notification-text)]">Update Available</p>
      <p class="mt-1 text-sm text-[var(--ws-notification-text-soft)]">A new software update is available. See what's new in version 4.2.</p>
    </div>
    <button type="button" class="flex-shrink-0 rounded-lg p-1 text-[var(--ws-notification-text-soft)] transition hover:bg-[var(--ws-notification-border)] hover:text-[var(--ws-notification-text)]" aria-label="Dismiss notification">
      <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
    </button>
  </div>
</div>

Details

Family

notification

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

notificationtoastalertfeedbackui

Slots

Name	Required	Description
icon	No	Leading status icon.
title	Yes	Notification heading.
message	Yes	Notification body text.
dismiss	No	Close button.

Base toast notification card. Displays an info icon, title, message text, and close button. Rendered as a static card — position it fixed or absolute in your layout for floating toast behavior.