Badge - Tailwind CSS UI Kit Component
Medium Number Badge
![](/_next/image?url=%2Fimages%2Fpreview-bg.webp&w=3840&q=100)
100100100100100100
Medium Number Badge with Label
![](/_next/image?url=%2Fimages%2Fpreview-bg.webp&w=3840&q=100)
2Default
2Primary
2Secondary
2Success
2Error
2Warning
Large Number Badge
![](/_next/image?url=%2Fimages%2Fpreview-bg.webp&w=3840&q=100)
100100100100100100
Large Number Badge with Label
![](/_next/image?url=%2Fimages%2Fpreview-bg.webp&w=3840&q=100)
2Default
2Primary
2Secondary
2Success
2Error
2Warning
Dot Badge
![](/_next/image?url=%2Fimages%2Fpreview-bg.webp&w=3840&q=100)
Dot Badge with Label
![](/_next/image?url=%2Fimages%2Fpreview-bg.webp&w=3840&q=100)
Default
Primary
Secondary
Success
Error
Warning
A badge, sometimes referred to as a tag, is a compact overlapping UI element designed to showcase a status, notification, or event associated with the underlying object. This versatile component is seamlessly incorporated into user interfaces, including those crafted with the Tailwind CSS UI kit, to enhance visual communication.