Component

Badges

Badges are small visual indicators used to label, emphasize, or convey status. They can contain text, numbers, or icons.

<span class="quanta-badge quanta-badge-primary">Primary</span>
<span class="quanta-badge quanta-badge-success">Success</span>
<span class="quanta-badge quanta-badge-danger">Danger</span>
<span class="quanta-badge quanta-badge-warning">Warning</span>
<span class="quanta-badge quanta-badge-info">Info</span>

Primary Success Danger Warning Info

Sizes

Badges come in sm, md, and lg:

<span class="quanta-badge quanta-badge-sm quanta-badge-success">Small</span>
<span class="quanta-badge quanta-badge-md quanta-badge-success">Medium</span>
<span class="quanta-badge quanta-badge-lg quanta-badge-success">Large</span>

Small Medium Large

Filled Variants

Choose from semantic or neutral tones:

<span class="quanta-badge quanta-badge-secondary">Secondary</span>
<span class="quanta-badge quanta-badge-neutral">Neutral</span>
<span class="quanta-badge quanta-badge-accent">Accent</span>
<span class="quanta-badge quanta-badge-light">Light</span>
<span class="quanta-badge quanta-badge-ghost">Ghost</span>
<span class="quanta-badge quanta-badge-link">Link</span>

Secondary Neutral Accent Light Ghost Link

Outline Badges

Use outline styles for a lighter look:

<span class="quanta-badge quanta-badge-outline-primary">Primary</span>
<span class="quanta-badge quanta-badge-outline-success">Success</span>
<span class="quanta-badge quanta-badge-outline-danger">Danger</span>

Primary Success Danger

Dot & Count Badges

Attach to icons or elements to indicate activity or counts:

<div class="relative">
  <button class="quanta-btn quanta-btn-primary">Messages</button>
  <span class="quanta-badge-count">3</span>
</div>

<div class="relative">
  <button class="quanta-btn quanta-btn-secondary">Status</button>
  <span class="quanta-badge-dot"></span>
</div>

3