Basecoat UI MCP

# Badge Component Usage ## Overview The badge component displays short status descriptors, labels, or counts. Badges are used to highlight information, indicate status, or categorize content. They come in multiple variants and can be combined with icons. ## HTML Structure ### Basic Badge ```html <span class="badge">Badge</span> ``` ### Badge Variants ```html <!-- Primary (default) --> <span class="badge">Primary</span> <span class="badge-primary">Primary</span> <!-- Secondary --> <span class="badge-secondary">Secondary</span> <!-- Destructive --> <span class="badge-destructive">Destructive</span> <!-- Outline --> <span class="badge-outline">Outline</span> ``` ## Badge with Icons ### Leading Icon ```html <span class="badge"> <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> Pending </span> ``` ### Trailing Icon ```html <span class="badge-secondary"> New <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M18 6 6 18"></path> <path d="m6 6 12 12"></path> </svg> </span> ``` ### Icon Only (Count Badge) ```html <span class="badge rounded-full size-5 p-0 justify-center">3</span> ``` ## Implementation Examples ### Status Badges ```html <div class="flex flex-wrap gap-2"> <span class="badge-outline"> <span class="size-2 rounded-full bg-green-500"></span> Active </span> <span class="badge-outline"> <span class="size-2 rounded-full bg-yellow-500"></span> Pending </span> <span class="badge-outline"> <span class="size-2 rounded-full bg-red-500"></span> Inactive </span> <span class="badge-outline"> <span class="size-2 rounded-full bg-gray-500"></span> Draft </span> </div> ``` ### Notification Badge ```html <button class="btn-icon-outline relative"> <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path> <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path> </svg> <span class="badge-destructive absolute -top-1 -right-1 size-5 rounded-full p-0 justify-center text-xs"> 5 </span> </button> ``` ### Category Tags ```html <div class="flex flex-wrap gap-2"> <span class="badge-secondary">Technology</span> <span class="badge-secondary">Design</span> <span class="badge-secondary">Business</span> <span class="badge-secondary">Marketing</span> </div> ``` ### Feature Labels ```html <div class="card"> <header class="flex items-start justify-between"> <div> <h3>Pro Plan</h3> <p class="text-muted-foreground text-sm">Best for professionals</p> </div> <span class="badge">Popular</span> </header> <section> <ul class="space-y-2"> <li class="flex items-center gap-2"> <svg class="size-4 text-green-500"><!-- check icon --></svg> Unlimited projects <span class="badge-secondary text-xs">New</span> </li> <li class="flex items-center gap-2"> <svg class="size-4 text-green-500"><!-- check icon --></svg> Priority support </li> </ul> </section> </div> ``` ### Version/Release Badges ```html <div class="flex items-center gap-2"> <span class="badge-outline">v2.0.0</span> <span class="badge">Latest</span> <span class="badge-secondary">Stable</span> </div> ``` ### Table with Status Badges ```html <table class="table w-full"> <thead> <tr> <th>Name</th> <th>Status</th> <th>Role</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td><span class="badge">Active</span></td> <td><span class="badge-secondary">Admin</span></td> </tr> <tr> <td>Jane Smith</td> <td><span class="badge">Active</span></td> <td><span class="badge-outline">Member</span></td> </tr> <tr> <td>Bob Johnson</td> <td><span class="badge-destructive">Suspended</span></td> <td><span class="badge-outline">Member</span></td> </tr> </tbody> </table> ``` ### Removable Tags ```html <div class="flex flex-wrap gap-2"> <span class="badge-secondary inline-flex items-center gap-1"> JavaScript <button type="button" class="hover:text-foreground" aria-label="Remove JavaScript"> <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M18 6 6 18"></path> <path d="m6 6 12 12"></path> </svg> </button> </span> <span class="badge-secondary inline-flex items-center gap-1"> React <button type="button" class="hover:text-foreground" aria-label="Remove React"> <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M18 6 6 18"></path> <path d="m6 6 12 12"></path> </svg> </button> </span> <span class="badge-secondary inline-flex items-center gap-1"> TypeScript <button type="button" class="hover:text-foreground" aria-label="Remove TypeScript"> <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M18 6 6 18"></path> <path d="m6 6 12 12"></path> </svg> </button> </span> </div> ``` ### Priority Badges ```html <div class="flex flex-wrap gap-2"> <span class="badge-destructive"> <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path> <path d="M12 9v4"></path> <path d="M12 17h.01"></path> </svg> Critical </span> <span class="badge" style="background-color: rgb(234 179 8); color: black;"> High </span> <span class="badge-secondary"> Medium </span> <span class="badge-outline"> Low </span> </div> ``` ## Styling Variants ### Rounded Badge ```html <span class="badge rounded-full">Rounded</span> <span class="badge-secondary rounded-full">Pill</span> ``` ### Custom Colors ```html <span class="badge" style="background-color: rgb(59 130 246); color: white;">Blue</span> <span class="badge" style="background-color: rgb(34 197 94); color: white;">Green</span> <span class="badge" style="background-color: rgb(168 85 247); color: white;">Purple</span> <span class="badge" style="background-color: rgb(249 115 22); color: white;">Orange</span> ``` ### Size Variations ```html <span class="badge text-xs px-1.5 py-0.5">Extra Small</span> <span class="badge">Default</span> <span class="badge text-sm px-3 py-1">Large</span> ``` ## Link Badges ### Clickable Badge ```html <a href="/category/new" class="badge-outline hover:bg-accent transition-colors"> View New Items <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m9 18 6-6-6-6"></path> </svg> </a> ``` ## Accessibility Guidelines ### Semantic Usage - Use badges for supplementary information, not primary content - Ensure color is not the only indicator of meaning - Include text labels with colored status indicators ### Screen Reader Considerations ```html <!-- Good: Text describes the status --> <span class="badge-destructive">Error</span> <!-- Better: Additional context for screen readers --> <span class="badge-destructive" role="status" aria-label="Error status"> <span class="size-2 rounded-full bg-current"></span> Error </span> ``` ### Interactive Badges ```html <!-- Removable tag with accessible button --> <span class="badge-secondary inline-flex items-center gap-1"> <span id="tag-label">JavaScript</span> <button type="button" aria-label="Remove JavaScript tag" aria-describedby="tag-label" class="hover:text-foreground" > <svg class="size-3" aria-hidden="true"><!-- x icon --></svg> </button> </span> ``` ## Best Practices ### When to Use Badges - Status indicators (active, pending, error) - Counts (notifications, items) - Categories and tags - Version labels - Feature highlights (new, beta) - Priority levels ### When to Avoid Badges - Long text content (use cards or alerts instead) - Primary navigation (use buttons or links) - Form inputs (use proper form elements) ### Content Guidelines - Keep text short (1-2 words ideal) - Use consistent terminology - Match badge type to meaning (destructive for errors, etc.) ### Visual Guidelines - Maintain consistent sizing within context - Don't overuse badges (they lose impact) - Ensure adequate contrast - Position badges consistently ## JavaScript Integration ### Dynamic Badge Updates ```javascript function updateBadgeCount(badgeId, count) { const badge = document.getElementById(badgeId); if (badge) { badge.textContent = count > 99 ? '99+' : count; badge.hidden = count === 0; } } // Usage updateBadgeCount('notification-badge', 5); ``` ### Remove Tag Functionality ```javascript document.querySelectorAll('.badge button').forEach(button => { button.addEventListener('click', function() { const badge = this.closest('.badge, [class*="badge-"]'); if (badge) { badge.remove(); // Optionally dispatch an event document.dispatchEvent(new CustomEvent('tagRemoved', { detail: { tag: badge.textContent.trim() } })); } }); }); ``` ### Toggle Badge Visibility ```javascript function toggleBadge(badgeId, show) { const badge = document.getElementById(badgeId); if (badge) { badge.classList.toggle('hidden', !show); } } ```