Badge Component — Astro

Small labels and tags for displaying status, categories, or counts

Badge Component

Small labels and tags for displaying status, categories, or counts. Badges are inline elements that can be used within text or alongside other components.

Badge Variants

Live Examples
Primary Success Warning Error Info

Badge Sizes

Live Examples
Small Medium Large

Pill Badges

Live Examples
Pill Primary Pill Success Small Pill Large Pill

Usage in Context

Live Examples

You have 3 new messages.

Status: Active

Priority: High

Categories: Design Development Completed

All badges:

  • Use semantic theme variables
  • Are inline elements (can be used within text)
  • Support multiple variants and sizes
  • Have pill/rounded variant option
  • Automatically adapt to theme changes

Usage

astro astro 
<!-- Using component -->
---
import Badge from '../../components/Badge.astro';
---

<Badge variant="primary">New</Badge>
<Badge variant="success" size="sm">Active</Badge>
<Badge variant="error" pill>Urgent</Badge>

<!-- Using classes -->
<span class="badge badge--primary">Primary</span>
<span class="badge badge--success badge--sm">Small Success</span>
<span class="badge badge--error badge--lg badge--pill">Large Pill Error</span>

Props

  • variant (optional) - Badge variant: primary, success, warning, error, info (default: primary)
  • size (optional) - Badge size: sm, md, lg (default: md)
  • pill (optional) - Boolean to enable pill/rounded variant (default: false)
  • class (optional) - Additional CSS classes

Badge Variants

Text on solid semantic variants (success, warning, error, info) uses the same contrast variables as buttons (--success-text-on-solid, --warning-text-on-solid, etc.) so badge text stays readable across all themes.

  • badge--primary - Primary/accent color badge
  • badge--success - Success/positive badge
  • badge--warning - Warning badge
  • badge--error - Error/destructive badge
  • badge--info - Informational badge

Badge Sizes

  • badge--sm - Small badge (extra small font, minimal padding)
  • badge--md - Medium badge (small font, standard padding) - default
  • badge--lg - Large badge (base font, larger padding)

Pill Variant

Add the badge--pill class or pill prop to create fully rounded badges:

astro astro 
<Badge variant="primary" pill>Pill Badge</Badge>
<span class="badge badge--primary badge--pill">Pill Badge</span>

Svelte & Vanilla: Svelte · Vanilla: same HTML and BEM as in Usage above.