v1.1.1

Badge / Tag

Inline labels for status, categories, and metadata. Includes standard badges and pill-shaped tags with removable and semantic variants.

Variants

Three styles — filled (default), bordered, and soft — combined with six colors: primary, secondary, info, danger, success, and warning.

html
Primary Secondary Info Danger Success Warning
Primary Info Danger Success
Primary Secondary Info Danger Success Warning 
<div class="vt-flex vt-flex-wrap vt-items-center vt-gap-3">
  <span class="vt-badge">Primary</span>
  <span class="vt-badge vt-badge-secondary">Secondary</span>
  <span class="vt-badge vt-badge-info">Info</span>
  <span class="vt-badge vt-badge-danger">Danger</span>
  <span class="vt-badge vt-badge-success">Success</span>
  <span class="vt-badge vt-badge-warning">Warning</span>
</div>
<div class="vt-flex vt-flex-wrap vt-items-center vt-gap-3">
  <span class="vt-badge vt-badge-bordered">Primary</span>
  <span class="vt-badge vt-badge-bordered vt-badge-info">Info</span>
  <span class="vt-badge vt-badge-bordered vt-badge-danger">Danger</span>
  <span class="vt-badge vt-badge-bordered vt-badge-success">Success</span>
</div>
<div class="vt-flex vt-flex-wrap vt-items-center vt-gap-3">
  <span class="vt-badge vt-badge-soft">Primary</span>
  <span class="vt-badge vt-badge-soft vt-badge-secondary">Secondary</span>
  <span class="vt-badge vt-badge-soft vt-badge-info">Info</span>
  <span class="vt-badge vt-badge-soft vt-badge-danger">Danger</span>
  <span class="vt-badge vt-badge-soft vt-badge-success">Success</span>
  <span class="vt-badge vt-badge-soft vt-badge-warning">Warning</span>
</div>

With Icon

Badges can include a leading icon or dot indicator.

html
Active
Verified
Featured
React 
<div class="vt-badge vt-gap-1.5">

  <span class="vt-w-1.5 vt-h-1.5 vt-rounded-full vt-bg-current vt-opacity-70 vt-inline-block vt-shrink-0"></span>
  Active
</div>
<div class="vt-badge vt-badge-secondary vt-gap-1">

  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check">
    <path d="M20 6 9 17l-5-5"></path>
  </svg>
  Verified
</div>
<div class="vt-badge vt-badge-secondary vt-badge-bordered vt-gap-1">

  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-star">
    <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
  </svg>
  Featured
</div>
<div class="vt-badge vt-badge-secondary vt-gap-1">

  React
  <button class="vt-ml-0.5 vt-hover:opacity-70 vt-transition-opacity">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-3 vt-h-3">
      <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
    </svg>
  </button>
</div>

Pill Shape

Tags with rounded-full shape in filled, secondary, and bordered variants.

html
Filled Secondary Bordered 
<div class="vt-flex vt-flex-wrap vt-items-center vt-gap-3">
  <span class="vt-pill vt-bg-info-fill vt-text-generic-white">
    Filled
  </span>
  <span class="vt-pill vt-bg-surface-subtle vt-text-foreground-primary">
    Secondary
  </span>
  <span class="vt-pill vt-border vt-border-border-default vt-text-foreground-primary">
    Bordered
  </span>
</div>

Removable

Tags with a close button for removable selections.

html
React TypeScript Utilities Astro 
<div class="vt-flex vt-flex-wrap vt-items-center vt-gap-3">
  <span class="vt-pill vt-gap-1.5 vt-bg-surface-subtle vt-text-foreground-primary">
    React
    <button class="vt-text-foreground-muted vt-hover:text-foreground-primary vt-transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-3 vt-h-3">
        <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
      </svg>
    </button>
  </span>
  <span class="vt-pill vt-gap-1.5 vt-bg-surface-subtle vt-text-foreground-primary">
    TypeScript
    <button class="vt-text-foreground-muted vt-hover:text-foreground-primary vt-transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-3 vt-h-3">
        <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
      </svg>
    </button>
  </span>
  <span class="vt-pill vt-gap-1.5 vt-bg-surface-subtle vt-text-foreground-primary">
    Utilities
    <button class="vt-text-foreground-muted vt-hover:text-foreground-primary vt-transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-3 vt-h-3">
        <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
      </svg>
    </button>
  </span>
  <span class="vt-pill vt-gap-1.5 vt-bg-surface-subtle vt-text-foreground-primary">
    Astro
    <button class="vt-text-foreground-muted vt-hover:text-foreground-primary vt-transition-colors">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-3 vt-h-3">
        <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
      </svg>
    </button>
  </span>
</div>

Semantic Colors

Soft badges provide semantic status colors on a subtle tinted background.

html
Success Warning Danger Info 
<div class="vt-flex vt-flex-wrap vt-items-center vt-gap-3">
  <span class="vt-badge vt-badge-soft vt-badge-success">
    Success
  </span>
  <span class="vt-badge vt-badge-soft vt-badge-warning">
    Warning
  </span>
  <span class="vt-badge vt-badge-soft vt-badge-danger">
    Danger
  </span>
  <span class="vt-badge vt-badge-soft vt-badge-info">
    Info
  </span>
</div>

Sizes

Available in small, default, and large sizes.

html
Small Default Large 
<div class="vt-flex vt-flex-wrap vt-items-center vt-gap-3">
  <span class="vt-pill vt-pill-sm vt-bg-info-fill vt-text-generic-white">
    Small
  </span>
  <span class="vt-pill vt-bg-info-fill vt-text-generic-white">
    Default
  </span>
  <span class="vt-pill vt-pill-lg vt-bg-info-fill vt-text-generic-white">
    Large
  </span>
</div>

Pill with Icons

Pill tags with leading icons for additional context.

html
Featured Recent Verified 
<div class="vt-flex vt-flex-wrap vt-items-center vt-gap-3">
  <span class="vt-pill vt-gap-1.5 vt-bg-surface-subtle vt-text-foreground-primary">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-star vt-w-3 vt-h-3">
      <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path>
    </svg>
    Featured
  </span>
  <span class="vt-pill vt-gap-1.5 vt-bg-surface-subtle vt-text-foreground-primary">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-clock vt-w-3 vt-h-3">
      <circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path>
    </svg>
    Recent
  </span>
  <span class="vt-pill vt-gap-1.5 vt-bg-surface-subtle vt-text-foreground-primary">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check vt-w-3 vt-h-3">
      <path d="M20 6 9 17l-5-5"></path>
    </svg>
    Verified
  </span>
</div>

Input Tags

An input field with tags for multi-value entry.

html
Design Frontend UI/UX 
<div class="vt-w-full vt-max-w-md">
  <div class="vt-flex vt-flex-wrap vt-items-center vt-gap-2 vt-p-2 vt-rounded-lg vt-border vt-border-border-strong vt-bg-surface-card vt-min-h-[42px]">
    <span class="vt-pill vt-gap-1.5 vt-bg-surface-subtle vt-text-foreground-primary">
      Design
      <button class="vt-text-foreground-muted vt-hover:text-foreground-primary vt-transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-3 vt-h-3">
          <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
        </svg>
      </button>
    </span>
    <span class="vt-pill vt-gap-1.5 vt-bg-surface-subtle vt-text-foreground-primary">
      Frontend
      <button class="vt-text-foreground-muted vt-hover:text-foreground-primary vt-transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-3 vt-h-3">
          <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
        </svg>
      </button>
    </span>
    <span class="vt-pill vt-gap-1.5 vt-bg-surface-subtle vt-text-foreground-primary">
      UI/UX
      <button class="vt-text-foreground-muted vt-hover:text-foreground-primary vt-transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-x vt-w-3 vt-h-3">
          <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
        </svg>
      </button>
    </span>
    <input type="text" placeholder="Add tag..." class="vt-flex-1 vt-min-w-[80px] vt-bg-transparent vt-text-sm vt-text-foreground-primary vt-placeholder:text-foreground-muted vt-outline-none vt-border-none vt-py-1" aria-label="Add tag...">
  </div>
</div>

Use Cases

Common usage patterns for badges.

html

Status indicators

Active Pending Error Inactive

Tag list

Astro
React
TypeScript
VT Utilities
Open Source

Notification count

3
12 
<div>
  <p class="vt-text-sm vt-font-medium vt-mb-3 vt-text-foreground-muted">Status indicators</p>
  <div class="vt-flex vt-flex-wrap vt-gap-2">
    <span class="vt-badge vt-badge-soft vt-badge-info">Active</span>
    <span class="vt-badge vt-badge-soft vt-badge-warning">Pending</span>
    <span class="vt-badge vt-badge-soft vt-badge-danger">Error</span>
    <span class="vt-badge vt-badge-soft vt-badge-secondary">Inactive</span>
  </div>
</div>

<div>
  <p class="vt-text-sm vt-font-medium vt-mb-3 vt-text-foreground-muted">Tag list</p>
  <div class="vt-flex vt-flex-wrap vt-gap-2">
    <div class="vt-badge vt-badge-secondary vt-badge-bordered">
      Astro
    </div>
    <div class="vt-badge vt-badge-secondary vt-badge-bordered">
      React
    </div>
    <div class="vt-badge vt-badge-secondary vt-badge-bordered">
      TypeScript
    </div>
    <div class="vt-badge vt-badge-secondary vt-badge-bordered">
      VT Utilities
    </div>
    <div class="vt-badge vt-badge-secondary vt-badge-bordered">
      Open Source
    </div>
  </div>
</div>

<div>
  <p class="vt-text-sm vt-font-medium vt-mb-3 vt-text-foreground-muted">Notification count</p>
  <div class="vt-flex vt-items-center vt-gap-4">
    <div class="vt-relative vt-inline-flex">
      <button class="vt-btn vt-btn-bordered">
        Inbox
      </button>
      <span class="vt-count-badge vt-absolute vt--top-1.5 vt--right-1.5">3</span>
    </div>
    <div class="vt-relative vt-inline-flex">
      <button class="vt-btn vt-btn-bordered">
        Messages
      </button>
      <span class="vt-count-badge vt-bg-info-fill vt-absolute vt--top-1.5 vt--right-1.5">12</span>
    </div>
  </div>
</div>

Guidelines

Static status or category tag (Paid, Active, Feature). Soft style for table/list statuses. NOT clickable; counts → count-badge; removable/selectable tokens → chip; standalone rounded label → pill.

Active Pending Failed
Do
Use soft badges for statuses in tables and lists.
Beta Draft Paid
Do
Keep badge text short — a single status or category word.
3 12
Don't
Don't use a badge for numeric counts — use a count badge.

API Reference

All CSS classes available for the Badge component.

Class Type Description
vt-badge Base Base badge — filled primary, rounded-full, 24px tall (14px leading icon)
vt-badge-secondary Color Neutral color (muted background / grey accent)
vt-badge-danger Color Red color for errors or destructive labels
vt-badge-success Color Green color for positive states
vt-badge-warning Color Orange color for warnings
vt-badge-info Color Blue color for informational states
vt-badge-bordered Style Outline style — combines with any color class
vt-badge-soft Style Soft style — 10% tinted background with colored text, combines with any color class
vt-pill Base Rounded-full tag/pill — inline-flex, medium weight
vt-pill-sm Size Small pill size (10px text, tight padding)
vt-pill-lg Size Large pill size (sm text, wider padding)
vt-count-badge Base Red notification counter — min-w, bold, rounded-full

Accessibility

Keyboard and screen reader support.

Feature Details
Semantics Badges are inline text — no special role needed for static labels
Removable Remove buttons should have aria-label="Remove [tag name]"
Status Use aria-label on status badges if color alone conveys meaning
Notification Notification counters should use aria-label, e.g. "3 unread messages"
Used in:
Notification Badge Stepper Table