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

<!-- Filled (default) -->
<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>

<!-- Bordered -->
<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>

<!-- Soft -->
<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>

With Icon

Badges can include a leading icon or dot indicator.

html

Active

Verified

Featured

React

<span 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"></span>
  Active
</span>

<span class="vt-badge vt-badge-secondary vt-gap-1">
  <svg>...</svg>
  Verified
</span>

<span class="vt-badge vt-badge-bordered vt-badge-secondary vt-gap-1">
  <svg>...</svg>
  Featured
</span>

<span class="vt-badge vt-badge-secondary vt-gap-1">
  React
  <button class="vt-ml-0.5 vt-hover:opacity-70">
    <svg class="vt-w-3 vt-h-3">...</svg>
  </button>
</span>

Pill Shape

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

html

Filled Secondary Bordered

<!-- Filled -->
<span class="vt-pill vt-bg-info-primary vt-text-generic-white">
  Filled
</span>

<!-- Secondary -->
<span class="vt-pill vt-bg-surfaces-subtle vt-text-mains-primary">Secondary</span>

<!-- Bordered -->
<span class="vt-pill vt-border vt-border-border-default vt-text-mains-primary">Bordered</span>

Removable

Tags with a close button for removable selections.

html

React TypeScript Utilities Astro

<span class="vt-pill vt-gap-1.5 vt-bg-surfaces-subtle vt-text-mains-primary">
  React
  <button class="vt-text-mains-quaternary vt-hover:text-mains-primary
    vt-transition-colors">
    <svg class="vt-w-3 vt-h-3">...</svg>
  </button>
</span>

Semantic Colors

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

html

Success Warning Danger Info

<!-- Success -->
<span class="vt-badge vt-badge-soft vt-badge-success">Success</span>

<!-- Warning -->
<span class="vt-badge vt-badge-soft vt-badge-warning">Warning</span>

<!-- Danger -->
<span class="vt-badge vt-badge-soft vt-badge-danger">Danger</span>

<!-- Info -->
<span class="vt-badge vt-badge-soft vt-badge-info">Info</span>

Sizes

Available in small, default, and large sizes.

html

Small Default Large

<!-- Small -->
<span class="vt-pill vt-pill-sm vt-bg-info-primary vt-text-generic-white">
  Small
</span>

<!-- Default -->
<span class="vt-pill vt-bg-info-primary vt-text-generic-white">Default</span>

<!-- Large -->
<span class="vt-pill vt-pill-lg vt-bg-info-primary vt-text-generic-white">Large</span>

Pill with Icons

Pill tags with leading icons for additional context.

html

Featured Recent Verified

<!-- Filled -->
<span class="vt-pill vt-bg-info-primary vt-text-generic-white">
  Filled
</span>

<!-- Secondary -->
<span class="vt-pill vt-bg-surfaces-subtle vt-text-mains-primary">Secondary</span>

<!-- Bordered -->
<span class="vt-pill vt-border vt-border-border-default vt-text-mains-primary">Bordered</span>

Input Tags

An input field with tags for multi-value entry.

html

Design Frontend UI/UX

<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-surfaces-surface vt-min-h-[42px]">
  <span class="vt-pill vt-gap-1.5 vt-bg-surfaces-subtle vt-text-mains-primary">
    Design
    <button>...</button>
  </span>
  <input type="text" placeholder="Add tag..." />
</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

<!-- Status indicators -->
<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>

<!-- Tag list -->
<span class="vt-badge vt-badge-bordered vt-badge-secondary">Astro</span>
<span class="vt-badge vt-badge-bordered vt-badge-secondary">React</span>

<!-- Notification count -->
<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>

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

Use soft badges for statuses in tables and lists.

Beta Draft Paid

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:

Data Table Notification Badge Stepper Table