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
Default
Secondary
Bordered
Danger 
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="bordered">Bordered</Badge>
<Badge variant="danger">Danger</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-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-inline-flex uc-items-center uc-rounded-full
  uc-px-3 uc-py-1 uc-text-xs uc-font-medium
  uc-bg-accents-blue uc-text-constant-white">
  Filled
</span>

<!-- Secondary -->
<span class="... uc-bg-neutrals-subtle uc-text-fg-primary">Secondary</span>

<!-- Bordered -->
<span class="... uc-border uc-border-border-default uc-text-fg-primary">Bordered</span>

Removable

Tags with a close button for removable selections.

html
React TypeScript Utilities Astro 
<span class="uc-inline-flex uc-items-center uc-gap-1.5
  uc-rounded-full uc-px-3 uc-py-1 uc-text-xs uc-font-medium
  uc-bg-neutrals-subtle uc-text-fg-primary">
  React
  <button class="uc-text-fg-disabled uc-hover:text-fg-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-inline-flex uc-items-center uc-rounded-full
  uc-px-3 uc-py-1 uc-text-xs uc-font-medium uc-tone-success">
  Success
</span>

<!-- Warning -->
<span class="... uc-tone-warning">Warning</span>

<!-- Danger -->
<span class="... uc-tone-danger">Danger</span>

<!-- Info -->
<span class="... uc-tone-info">Info</span>

Sizes

Available in small, default, and large sizes.

html
Small Default Large 
<!-- Small -->
<span class="uc-inline-flex uc-items-center uc-rounded-full
  uc-px-2 uc-py-0.5 uc-text-[10px] uc-font-medium
  uc-bg-accents-blue uc-text-constant-white">
  Small
</span>

<!-- Default -->
<span class="... uc-px-3 uc-py-1 uc-text-xs ...">Default</span>

<!-- Large -->
<span class="... uc-px-4 uc-py-1.5 uc-text-sm ...">Large</span>

Pill with Icons

Pill tags with leading icons for additional context.

html
Featured Recent Verified 
<!-- Filled -->
<span class="uc-inline-flex uc-items-center uc-rounded-full
  uc-px-3 uc-py-1 uc-text-xs uc-font-medium
  uc-bg-accents-blue uc-text-constant-white">
  Filled
</span>

<!-- Secondary -->
<span class="... uc-bg-neutrals-subtle uc-text-fg-primary">Secondary</span>

<!-- Bordered -->
<span class="... uc-border uc-border-border-default uc-text-fg-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-neutrals-surface uc-min-h-[42px]">
  <span class="uc-inline-flex uc-items-center uc-gap-1.5
    uc-rounded-full uc-px-3 uc-py-1 uc-text-xs uc-font-medium
    uc-bg-neutrals-subtle uc-text-fg-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">Astro</span>
<span class="uc-badge uc-badge-bordered">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-accents-red uc-text-constant-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 — inline-flex, rounded, small text, padding
uc-badge-secondary Variant Muted background badge for secondary info
uc-badge-bordered Variant Outline-only badge with border
uc-badge-danger Variant Red badge for errors or destructive labels
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

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"