Badge
Small labels and tags for displaying status, categories, or counts
Same BEM classes and behavior as Astro, Svelte, and Vue.
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.
pnpm dlx rizzo-css add Badge
Live examples
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Badge from '../components/astro/Badge.astro';
---
<Badge>Default</Badge>
<Badge class="badge--primary">Primary</Badge>
<Badge class="badge--success">Success</Badge>
<!-- Rizzo CSS. No script needed. -->
<span class="badge">Default</span>
<span class="badge badge--primary">Primary</span>
<span class="badge badge--success">Success</span>
<script>
import { Badge } from '$lib/rizzo';
</script>
<Badge>Default</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="success">Success</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>
Other frameworks: Astro · Vanilla · Svelte · Vue
npm 
pnpm 
yarn 
bun