Dot Badge
A copy-paste badges & tags component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Badges & TagsHTMLCSSany framework
UpdatesActive
Copy into your project
HTML
<span class="nuda-dot-badge" data-color="red" aria-label="New updates">
<span class="nuda-dot-badge__dot"></span>
Updates
</span>
<span class="nuda-dot-badge" data-color="green" aria-label="Active">
<span class="nuda-dot-badge__dot"></span>
Active
</span>CSS
/* Dot Badge
Minimal dot badge with pulse.
Customize: data-color attribute values */
.nuda-dot-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #ccc;
}
.nuda-dot-badge__dot {
width: 7px;
height: 7px;
border-radius: 50%;
position: relative;
}
.nuda-dot-badge[data-color="red"] .nuda-dot-badge__dot {
background: #ef4444;
}
.nuda-dot-badge[data-color="green"] .nuda-dot-badge__dot {
background: #22c55e;
}
.nuda-dot-badge__dot::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: inherit;
animation: nuda-dot-ping 1.8s ease-out infinite;
will-change: transform, opacity;
}
@keyframes nuda-dot-ping {
0% {
transform: scale(1);
opacity: 0.6;
}
100% {
transform: scale(2.8);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.nuda-dot-badge__dot::after { animation: none; }
}How to use Dot 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.