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="uc-badge uc-gap-1.5">
<span class="uc-w-1.5 uc-h-1.5 uc-rounded-full uc-bg-current uc-opacity-70"></span>
Active
</span>
<span class="uc-badge uc-badge-secondary uc-gap-1">
<svg class="uc-w-3 uc-h-3">...</svg>
Verified
</span>
<span class="uc-badge uc-badge-bordered uc-badge-secondary uc-gap-1">
<svg class="uc-w-3 uc-h-3">...</svg>
Featured
</span>
<span class="uc-badge uc-badge-secondary uc-gap-1">
React
<button class="uc-ml-0.5 uc-hover:opacity-70">
<svg class="uc-w-3 uc-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="uc-pill uc-bg-info-primary uc-text-generic-white">
Filled
</span>
<!-- Secondary -->
<span class="uc-pill uc-bg-surfaces-subtle uc-text-mains-primary">Secondary</span>
<!-- Bordered -->
<span class="uc-pill uc-border uc-border-border-default uc-text-mains-primary">Bordered</span>Removable
Tags with a close button for removable selections.
html
React
TypeScript
Utilities
Astro
<span class="uc-pill uc-gap-1.5 uc-bg-surfaces-subtle uc-text-mains-primary">
React
<button class="uc-text-mains-quaternary uc-hover:text-mains-primary
uc-transition-colors">
<svg class="uc-w-3 uc-h-3">...</svg>
</button>
</span>Semantic Colors
Tags with semantic color variants for status and context.
html
Success
Warning
Danger
Info
<!-- Success -->
<span class="uc-pill uc-tone-success">Success</span>
<!-- Warning -->
<span class="uc-pill uc-tone-warning">Warning</span>
<!-- Danger -->
<span class="uc-pill uc-tone-danger">Danger</span>
<!-- Info -->
<span class="uc-pill uc-tone-info">Info</span>Sizes
Available in small, default, and large sizes.
html
Small
Default
Large
<!-- Small -->
<span class="uc-pill uc-pill-sm uc-bg-info-primary uc-text-generic-white">
Small
</span>
<!-- Default -->
<span class="uc-pill uc-bg-info-primary uc-text-generic-white">Default</span>
<!-- Large -->
<span class="uc-pill uc-pill-lg uc-bg-info-primary uc-text-generic-white">Large</span>Pill with Icons
Pill tags with leading icons for additional context.
html
Featured
Recent
Verified
<!-- Filled -->
<span class="uc-pill uc-bg-info-primary uc-text-generic-white">
Filled
</span>
<!-- Secondary -->
<span class="uc-pill uc-bg-surfaces-subtle uc-text-mains-primary">Secondary</span>
<!-- Bordered -->
<span class="uc-pill uc-border uc-border-border-default uc-text-mains-primary">Bordered</span>Input Tags
An input field with tags for multi-value entry.
html
Design
Frontend
UI/UX
<div class="uc-flex uc-flex-wrap uc-items-center uc-gap-2
uc-p-2 uc-rounded-lg uc-border uc-border-border-strong
uc-bg-surfaces-surface uc-min-h-[42px]">
<span class="uc-pill uc-gap-1.5 uc-bg-surfaces-subtle uc-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="uc-status-pill uc-tone-info">Active</span>
<span class="uc-status-pill uc-tone-warning">Pending</span>
<span class="uc-status-pill uc-tone-danger">Error</span>
<!-- Tag list -->
<span class="uc-badge uc-badge-bordered uc-badge-secondary">Astro</span>
<span class="uc-badge uc-badge-bordered uc-badge-secondary">React</span>
<!-- Notification count -->
<div class="uc-relative uc-inline-flex">
<button class="uc-btn uc-btn-bordered">Inbox</button>
<span class="uc-absolute uc--top-1.5 uc--right-1.5
uc-rounded-full uc-bg-error-primary uc-text-generic-white
uc-text-[10px] uc-font-bold uc-w-5 uc-h-5
uc-inline-flex uc-items-center uc-justify-center">3</span>
</div>API Reference
All CSS classes available for the Badge component.
| Class | Type | Description |
|---|---|---|
uc-badge |
Base | Base badge — filled primary, rounded-full, 24px tall (28px with a 20px icon) |
uc-badge-secondary |
Color | Neutral color (muted background / grey accent) |
uc-badge-danger |
Color | Red color for errors or destructive labels |
uc-badge-success |
Color | Green color for positive states |
uc-badge-warning |
Color | Orange color for warnings |
uc-badge-bordered |
Style | Outline style — combines with any color class |
uc-tone-success |
Semantic | Green pill for success status |
uc-tone-warning |
Semantic | Orange pill for warning status |
uc-tone-danger |
Semantic | Red pill for error/danger status |
uc-tone-info |
Semantic | Blue pill for informational status |
uc-status-pill |
Base | Status pill with dot indicator — rounded-full, small text |
uc-pill |
Base | Rounded-full tag/pill — inline-flex, medium weight |
uc-pill-sm |
Size | Small pill size (10px text, tight padding) |
uc-pill-lg |
Size | Large pill size (sm text, wider padding) |
uc-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: