callout danger error critical red callout danger error critical red destructive security red danger callout critical error notice
Callout Danger
Fetch pattern JSON:
curl https://webspire.de/patterns/callout/danger.json danger.html
<aside role="note" aria-label="Danger" class="ws-callout flex gap-4 rounded-lg border-l-4 border-[var(--ws-color-danger)] bg-[var(--ws-color-danger-soft)] p-4">
<svg class="mt-0.5 h-5 w-5 shrink-0 text-[var(--ws-color-danger)]" 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-.008zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
<div>
<p class="font-semibold text-[var(--ws-color-danger)]">Danger</p>
<p class="mt-1 text-sm text-[var(--ws-callout-text-soft)]">This is a danger callout for critical warnings. Use it when an action could result in data loss, security risks, or irreversible consequences.</p>
</div>
</aside>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
calloutdangererrorcriticalred
Slots
| Name | Required | Description |
|---|---|---|
| icon | No | Leading error/danger icon. |
| title | Yes | Callout heading text. |
| body | Yes | Callout message content. |
Red-themed danger callout for critical warnings, destructive actions, and security alerts. Extends the base callout with an urgent color scheme to signal irreversible consequences or errors.