Badge / Tag
Inline labels for status, categories, and metadata. Includes standard badges and pill-shaped tags with removable and semantic variants.
Variants
Different visual styles for different contexts.
html
Primary
Secondary
Danger
Success
Warning
Primary
Danger
Success
<!-- Filled -->
<Badge>Primary</Badge>
<Badge color="secondary">Secondary</Badge>
<Badge color="danger">Danger</Badge>
<Badge color="success">Success</Badge>
<Badge color="warning">Warning</Badge>
<!-- Bordered -->
<Badge variant="bordered" color="primary">Primary</Badge>
<Badge variant="bordered" color="danger">Danger</Badge>
<Badge variant="bordered" color="success">Success</Badge>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 class="vt-w-3 vt-h-3">...</svg>
Verified
</span>
<span class="vt-badge vt-badge-bordered vt-badge-secondary vt-gap-1">
<svg class="vt-w-3 vt-h-3">...</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
Tags with semantic color variants for status and context.
html
Success
Warning
Danger
Info
<!-- Success -->
<span class="vt-pill vt-tone-success">Success</span>
<!-- Warning -->
<span class="vt-pill vt-tone-warning">Warning</span>
<!-- Danger -->
<span class="vt-pill vt-tone-danger">Danger</span>
<!-- Info -->
<span class="vt-pill vt-tone-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
UC Utilities
Open Source
Notification count
3
12
<!-- Status indicators -->
<span class="vt-status-pill vt-tone-info">Active</span>
<span class="vt-status-pill vt-tone-warning">Pending</span>
<span class="vt-status-pill vt-tone-danger">Error</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-absolute vt--top-1.5 vt--right-1.5
vt-rounded-full vt-bg-error-primary vt-text-generic-white
vt-text-[10px] vt-font-bold vt-w-5 vt-h-5
vt-inline-flex vt-items-center vt-justify-center">3</span>
</div>API Reference
All CSS classes available for the Badge component.
| Class | Type | Description |
|---|---|---|
vt-badge |
Base | Base badge — filled primary, rounded-full, 24px tall (28px with a 20px 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-bordered |
Style | Outline style — combines with any color class |
vt-tone-success |
Semantic | Green pill for success status |
vt-tone-warning |
Semantic | Orange pill for warning status |
vt-tone-danger |
Semantic | Red pill for error/danger status |
vt-tone-info |
Semantic | Blue pill for informational status |
vt-status-pill |
Base | Status pill with dot indicator — rounded-full, small text |
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: