toast notification alert snackbar feedback toast notification snackbar stack alert banner dismiss toast show toast messages stacked alert notifications feedback toast overlay
Toast Stack
Fetch pattern JSON:
curl https://webspire.de/patterns/notification-widget/toast-stack.json toast-stack.html
<div class="ws-notification-widget flex flex-col gap-2 max-w-sm w-full"
style="
--ws-notification-widget-bg: oklch(0.99 0.005 75);
--ws-notification-widget-text: oklch(0.25 0.02 75);
--ws-notification-widget-text-soft: oklch(0.40 0.015 75);
--ws-notification-widget-text-muted: oklch(0.55 0.01 75);
--ws-notification-widget-border: oklch(0.90 0.01 75);
--ws-notification-widget-accent: oklch(0.55 0.15 250);
--ws-notification-widget-accent-soft: oklch(0.92 0.04 250);
--ws-notification-widget-danger: oklch(0.55 0.2 25);
--ws-notification-widget-warning: oklch(0.70 0.15 85);
--ws-notification-widget-success: oklch(0.55 0.15 155);
">
<!-- Success Toast -->
<div class="rounded-2xl border px-5 py-4 flex items-start gap-3 shadow-sm"
role="status"
style="
background: var(--ws-notification-widget-bg);
border-color: var(--ws-notification-widget-border);
border-left: 4px solid var(--ws-notification-widget-success);
">
<span class="mt-0.5 text-base shrink-0" style="color: var(--ws-notification-widget-success);" aria-hidden="true">✓</span>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold leading-snug" style="color: var(--ws-notification-widget-text);">Changes saved successfully</p>
<p class="mt-0.5 text-xs" style="color: var(--ws-notification-widget-text-muted);">Your preferences have been updated</p>
</div>
<button type="button" class="shrink-0 text-sm leading-none p-1 rounded-lg" style="color: var(--ws-notification-widget-text-muted);" aria-label="Dismiss notification">×</button>
</div>
<!-- Warning Toast — offset -->
<div class="rounded-2xl border px-5 py-4 flex items-start gap-3 shadow-sm -mt-1"
role="status"
style="
background: var(--ws-notification-widget-bg);
border-color: var(--ws-notification-widget-border);
border-left: 4px solid var(--ws-notification-widget-warning);
">
<span class="mt-0.5 text-base shrink-0" style="color: var(--ws-notification-widget-warning);" aria-hidden="true">⚠</span>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold leading-snug" style="color: var(--ws-notification-widget-text);">Storage almost full (92%)</p>
<p class="mt-0.5 text-xs" style="color: var(--ws-notification-widget-text-muted);">Free up space or upgrade your plan</p>
</div>
<button type="button" class="shrink-0 text-sm leading-none p-1 rounded-lg" style="color: var(--ws-notification-widget-text-muted);" aria-label="Dismiss notification">×</button>
</div>
<!-- Error Toast — offset -->
<div class="rounded-2xl border px-5 py-4 flex items-start gap-3 shadow-sm -mt-1"
role="status"
style="
background: var(--ws-notification-widget-bg);
border-color: var(--ws-notification-widget-border);
border-left: 4px solid var(--ws-notification-widget-danger);
">
<span class="mt-0.5 text-base shrink-0" style="color: var(--ws-notification-widget-danger);" aria-hidden="true">✗</span>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold leading-snug" style="color: var(--ws-notification-widget-text);">Payment failed</p>
<p class="mt-0.5 text-xs" style="color: var(--ws-notification-widget-text-muted);">Please check your card details and try again</p>
</div>
<button type="button" class="shrink-0 text-sm leading-none p-1 rounded-lg" style="color: var(--ws-notification-widget-text-muted);" aria-label="Dismiss notification">×</button>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
toastnotificationalertsnackbarfeedback
Three stacked toast notifications with color-coded left borders for success, warning, and error states. Each toast includes an icon, message text, description, and a dismiss button. Stacked with slight negative margins for a layered appearance.