badge danger error red expired critical status badge danger error red expired offline critical failed red danger badge error status indicator
Badge Danger
Fetch pattern JSON:
curl https://webspire.de/patterns/badge/danger.json danger.html
<div class="ws-badge flex flex-wrap items-center gap-2">
<span class="inline-flex items-center rounded-full border border-[var(--ws-color-danger)]/20 bg-[var(--ws-color-danger-soft)] px-3 py-1 text-xs font-medium text-[var(--ws-color-danger)]">Error</span>
<span class="inline-flex items-center rounded-full border border-[var(--ws-color-danger)]/20 bg-[var(--ws-color-danger-soft)] px-3 py-1 text-xs font-medium text-[var(--ws-color-danger)]">Expired</span>
<span class="inline-flex items-center rounded-full border border-[var(--ws-color-danger)]/20 bg-[var(--ws-color-danger-soft)] px-3 py-1 text-xs font-medium text-[var(--ws-color-danger)]">
<svg class="mr-1.5 h-3 w-3" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg>
Offline
</span>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
badgedangererrorredexpiredcriticalstatus
Slots
| Name | Required | Description |
|---|---|---|
| icon | No | Optional leading dot or error icon. |
| label | Yes | Badge text content. |
Red-themed danger badge extending the base. Use for error states, expired items, offline indicators, or any critical status that demands immediate attention.