Pill Badge
A copy-paste badges & tags component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Badges & TagsHTMLCSSany framework
New FeatureShippedBeta
Copy into your project
HTML
<span class="nuda-pill-badge" data-variant="primary">New Feature</span>
<span class="nuda-pill-badge" data-variant="success">Shipped</span>
<span class="nuda-pill-badge" data-variant="warning">Beta</span>CSS
/* Pill Badge
Animated pill-style badge with variants.
Variants: primary, success, warning */
.nuda-pill-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
animation: nuda-pill-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.nuda-pill-badge[data-variant="primary"] {
background: rgba(99, 102, 241, 0.15);
color: #818cf8;
border: 1px solid rgba(99, 102, 241, 0.25);
}
.nuda-pill-badge[data-variant="success"] {
background: rgba(34, 197, 94, 0.15);
color: #4ade80;
border: 1px solid rgba(34, 197, 94, 0.25);
}
.nuda-pill-badge[data-variant="warning"] {
background: rgba(245, 158, 11, 0.15);
color: #fbbf24;
border: 1px solid rgba(245, 158, 11, 0.25);
}
@keyframes nuda-pill-pop {
0% {
opacity: 0;
transform: scale(0.7);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.nuda-pill-badge { animation: none; }
}How to use Pill Badge
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.