Badge Stack
A production-ready badge stack component for your Next.js application. Accessible, customizable, and built with modern standards.
Badge Stack
A cohesive collection of badge variants designed for list labels, status indicators, and compact tagging.
- Premium double-border containers
- Consistent sizes and contrast
- Icon and count support
- Lists
- Cards
- Tables
- Filters
| Name | Type | Default | Description |
|---|---|---|---|
| label | string | undefined | Badge text label |
| variant | 'pill' | 'outline' | 'gradient' | 'soft' | 'icon' | 'count' | 'status' | 'pill' | Visual style of the badge |
| icon | ReactNode | undefined | Optional leading icon |
| count | number | 0 | Numeric count for count badge |
Most components here are inspired by outstanding libraries and creators in the ecosystem. I don’t claim to be the original author — this is my space for learning, rebuilding, and understanding great work at a deeper level.
I’m still a student of the craft, constantly studying the best and translating what I learn through my own perspective. Every piece reflects curiosity, respect for the community, and small creative touches that feel true to me.
I’ve done my best to credit inspirations properly. If anything is missing or inaccurate, I truly appreciate a message so it can be corrected with care.