Badge Component — Astro

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.

Add this component

The command below includes <strong>Badge</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

bash bash Copy code

npx rizzo-css add Badge

bash bash Copy code

pnpm dlx rizzo-css add Badge

bash bash Copy code

npx rizzo-css add Badge

bash bash Copy code

bunx rizzo-css add Badge

Badge Variants

Badge Sizes

Pill Badges

Usage in Context

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

---
import Badge from '../components/astro/Badge.astro';
---

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

<!-- Rizzo CSS. No script needed. -->
<span class="badge badge--primary">Primary</span>
<span class="badge badge--success badge--sm">Small Success</span>
<span class="badge badge--error badge--pill">Pill Error</span>

<script>
  import { Badge } from '$lib/rizzo';
</script>

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

<script setup>
import Badge from '@/components/rizzo/Badge.vue';
</script>

<template>
  <Badge>Default</Badge>
  <Badge variant="primary">Primary</Badge>
  <Badge variant="success">Success</Badge>
</template>

import { Badge } from './components/react';

<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</Badge>

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:

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

Other frameworks: Vanilla · Svelte · Vue · React