Badges And Chips in TailwindCSS
?? Badges and Chips with Tailwind CSS
Badges and chips are small UI elements often used to display counts, labels, or statuses in a compact way.
Badges
Badges are typically small circles or rounded shapes with numbers or status indicators.
Basic Badge Example
<button class="relative inline-flex items-center px-3 py-1 bg-blue-600 text-white rounded"> Notifications <span class="ml-2 inline-block bg-red-600 text-white text-xs font-bold rounded-full px-2 py-0.5"> 5 </span></button>Chips
Chips are small, pill-shaped components that can contain text, icons, or be removable.
Basic Chip Example
<div class="inline-flex items-center bg-gray-200 text-gray-700 rounded-full px-3 py-1 text-sm font-medium"> Example Chip <button class="ml-2 focus:outline-none" aria-label="Remove chip"> <svg class="w-4 h-4 text-gray-500 hover:text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> </svg> </button></div>Variations & Tailwind Classes
| Feature | Tailwind Classes |
|---|---|
| Background color | bg-blue-600, bg-red-600, bg-gray-200 |
| Text color | text-white, text-gray-700, text-red-600 |
| Padding | px-3 py-1, px-2 py-0.5 |
| Rounded corners | rounded, rounded-full |
| Font size & weight | text-xs, text-sm, font-bold, font-medium |
| Inline flex layout | inline-flex items-center |
| Hover & focus states | hover:text-gray-700, focus:outline-none |
Would you like me to provide chips with dynamic add/remove functionality using JavaScript?
