notification toast alert feedback ui notification toast alert dismiss info toast notification for user feedback dismissible alert card
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
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.