Badge — Vanilla
Badge variants with vanilla HTML. Ensure Rizzo CSS is loaded.
Badge
Small labels and tags. Use badge--primary, badge--success, etc.
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
npm 
pnpm 
yarn 
bun Live example
Primary Success Warning Error Info Small Pill
HTML
html html
<span class="badge badge--primary">Primary</span>
<span class="badge badge--success">Success</span>
<span class="badge badge--warning">Warning</span>
<span class="badge badge--error">Error</span>
<span class="badge badge--info">Info</span>
<span class="badge badge--primary badge--sm">Small</span>
<span class="badge badge--success badge--pill">Pill</span>