Badge Success

Fetch pattern JSON: curl https://webspire.de/patterns/badge/success.json

success.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-success)]/20 bg-[var(--ws-color-success-soft)] px-3 py-1 text-xs font-medium text-[var(--ws-color-success)]">Active</span>
  <span class="inline-flex items-center rounded-full border border-[var(--ws-color-success)]/20 bg-[var(--ws-color-success-soft)] px-3 py-1 text-xs font-medium text-[var(--ws-color-success)]">Completed</span>
  <span class="inline-flex items-center rounded-full border border-[var(--ws-color-success)]/20 bg-[var(--ws-color-success-soft)] px-3 py-1 text-xs font-medium text-[var(--ws-color-success)]">
    <svg class="mr-1.5 h-3 w-3" fill="currentColor" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3"/></svg>
    Online
  </span>
</div>

Details

Family

badge

Tier

enhanced

Kind

component

Extends

badge/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

badgesuccessgreenactivecompletedstatus

Slots

Name	Required	Description
icon	No	Optional leading dot or checkmark.
label	Yes	Badge text content.

Green-themed success badge extending the base. Use for active states, completed tasks, online indicators, or any positive status label.