Popup Error

Fetch pattern JSON: curl https://webspire.de/patterns/popup/error.json

error.html

<div class="flex min-h-64 items-center justify-center">
  <button type="button" onclick="this.nextElementSibling.hidden=false" class="rounded-lg bg-red-600 px-5 py-2.5 text-sm font-medium text-white shadow transition hover:bg-red-700">Show Error</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-red-100 text-red-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.75m0 3.75h.008v.008H12v-.008zm0-12a9 9 0 100 18 9 9 0 000-18z"/>
      </svg>
    </div>
    <div class="flex-1">
      <p class="text-sm font-medium text-[var(--ws-popup-text)]">Error</p>
      <p class="mt-0.5 text-xs text-[var(--ws-popup-text-soft)]">Something went wrong. Please try again later.</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

Family

popup

Tier

enhanced

Kind

component

Extends

popup/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste Requires JS

Stable Published

popuptoastnotificationerrorredalertfailure

Slots

Name	Required	Description
icon	No	Error circle icon.
message	Yes	Error notification text.
close	No	Close/dismiss button.

Error toast notification with a red exclamation icon for failure messages and system errors. Extends the base toast with a danger color scheme.