badge warning amber pending review status badge warning amber pending review away caution amber warning badge pending status indicator
Badge Warning
Fetch pattern JSON:
curl https://webspire.de/patterns/badge/warning.json warning.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-warning)]/20 bg-[var(--ws-color-warning-soft)] px-3 py-1 text-xs font-medium text-[var(--ws-color-warning)]">Pending</span>
<span class="inline-flex items-center rounded-full border border-[var(--ws-color-warning)]/20 bg-[var(--ws-color-warning-soft)] px-3 py-1 text-xs font-medium text-[var(--ws-color-warning)]">In Review</span>
<span class="inline-flex items-center rounded-full border border-[var(--ws-color-warning)]/20 bg-[var(--ws-color-warning-soft)] px-3 py-1 text-xs font-medium text-[var(--ws-color-warning)]">
<svg class="mr-1.5 h-3 w-3" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg>
Away
</span>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
badgewarningamberpendingreviewstatus
Slots
| Name | Required | Description |
|---|---|---|
| icon | No | Optional leading dot or warning icon. |
| label | Yes | Badge text content. |
Amber-themed warning badge extending the base. Use for pending tasks, items under review, away indicators, or any status requiring attention.