popup toast notification warning amber alert popup toast notification warning amber caution alert warning toast notification amber warning popup
Popup Warning
Fetch pattern JSON:
curl https://webspire.de/patterns/popup/warning.json warning.html
<div class="flex min-h-64 items-center justify-center">
<button type="button" onclick="this.nextElementSibling.hidden=false" class="rounded-lg bg-amber-500 px-5 py-2.5 text-sm font-medium text-white shadow transition hover:bg-amber-600">Show Warning</button>
<div class="ws-popup fixed bottom-4 right-4 z-50 flex w-80 items-start gap-3 rounded-lg bg-[var(--ws-popup-bg)] p-4 shadow-lg ring-1 ring-[var(--ws-popup-border)]" hidden>
<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-100 text-amber-600">
<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="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"/>
</svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-[var(--ws-popup-text)]">Warning</p>
<p class="mt-0.5 text-xs text-[var(--ws-popup-text-soft)]">Your session is about to expire. Please save your work.</p>
</div>
<button type="button" aria-label="Close notification" onclick="this.closest('.ws-popup').hidden=true" class="shrink-0 text-[var(--ws-popup-text-soft)] transition hover:text-[var(--ws-popup-text)]">
<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 Requires JS
Stable Published
popuptoastnotificationwarningamberalert
Slots
| Name | Required | Description |
|---|---|---|
| icon | No | Warning triangle icon. |
| message | Yes | Warning notification text. |
| close | No | Close/dismiss button. |
Warning toast notification with an amber triangle icon for cautionary messages like session expiry or data validation issues. Extends the base toast with a warning color scheme.