Basecoat UI MCP

# Avatar Component Usage ## Overview The avatar component displays a user's profile image or a fallback when no image is available. It supports multiple sizes, fallback text/icons, and can be grouped together for displaying multiple users. ## HTML Structure ### Basic Avatar with Image ```html <img src="/avatar.png" alt="John Doe" class="size-10 rounded-full object-cover"> ``` ### Avatar with Fallback ```html <div class="size-10 rounded-full bg-muted flex items-center justify-center text-sm font-medium"> JD </div> ``` ### Avatar with Image and Fallback ```html <div class="relative size-10"> <img src="/avatar.png" alt="John Doe" class="size-full rounded-full object-cover" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'" > <div class="hidden size-full rounded-full bg-muted items-center justify-center text-sm font-medium absolute inset-0"> JD </div> </div> ``` ## Sizes ### Size Variants ```html <!-- Extra Small --> <img src="/avatar.png" alt="" class="size-6 rounded-full object-cover"> <!-- Small --> <img src="/avatar.png" alt="" class="size-8 rounded-full object-cover"> <!-- Medium (Default) --> <img src="/avatar.png" alt="" class="size-10 rounded-full object-cover"> <!-- Large --> <img src="/avatar.png" alt="" class="size-12 rounded-full object-cover"> <!-- Extra Large --> <img src="/avatar.png" alt="" class="size-16 rounded-full object-cover"> ``` ### Size with Fallback ```html <!-- Small fallback --> <div class="size-8 rounded-full bg-muted flex items-center justify-center text-xs font-medium"> JD </div> <!-- Medium fallback --> <div class="size-10 rounded-full bg-muted flex items-center justify-center text-sm font-medium"> JD </div> <!-- Large fallback --> <div class="size-12 rounded-full bg-muted flex items-center justify-center text-base font-medium"> JD </div> ``` ## Fallback Types ### Initials Fallback ```html <div class="size-10 rounded-full bg-muted flex items-center justify-center text-sm font-medium"> JD </div> ``` ### Icon Fallback ```html <div class="size-10 rounded-full bg-muted flex items-center justify-center"> <svg class="size-5 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> </div> ``` ### Colored Fallback ```html <div class="size-10 rounded-full bg-blue-500 text-white flex items-center justify-center text-sm font-medium"> JD </div> <div class="size-10 rounded-full bg-green-500 text-white flex items-center justify-center text-sm font-medium"> AB </div> <div class="size-10 rounded-full bg-purple-500 text-white flex items-center justify-center text-sm font-medium"> CD </div> ``` ## Implementation Examples ### User Profile Card ```html <div class="flex items-center gap-4 p-4 border rounded-lg"> <img src="/avatar.png" alt="" class="size-12 rounded-full object-cover"> <div> <h3 class="font-medium">John Doe</h3> <p class="text-sm text-muted-foreground">john@example.com</p> </div> </div> ``` ### User List Item ```html <div class="flex items-center gap-3 p-3 hover:bg-accent rounded-lg"> <img src="/avatar.png" alt="" class="size-10 rounded-full object-cover"> <div class="flex-1 min-w-0"> <p class="text-sm font-medium truncate">John Doe</p> <p class="text-xs text-muted-foreground truncate">Software Engineer</p> </div> <button class="btn-sm-outline">Follow</button> </div> ``` ### Comment Section ```html <div class="space-y-4"> <div class="flex gap-3"> <img src="/avatars/john.png" alt="" class="size-8 rounded-full object-cover shrink-0"> <div> <div class="flex items-center gap-2"> <span class="text-sm font-medium">John Doe</span> <span class="text-xs text-muted-foreground">2 hours ago</span> </div> <p class="text-sm mt-1">This is a great article! Really helped me understand the topic better.</p> </div> </div> <div class="flex gap-3"> <img src="/avatars/jane.png" alt="" class="size-8 rounded-full object-cover shrink-0"> <div> <div class="flex items-center gap-2"> <span class="text-sm font-medium">Jane Smith</span> <span class="text-xs text-muted-foreground">1 hour ago</span> </div> <p class="text-sm mt-1">Thanks for sharing! I learned a lot from this.</p> </div> </div> </div> ``` ### Avatar Group ```html <div class="flex -space-x-2"> <img src="/avatars/1.png" alt="User 1" class="size-8 rounded-full object-cover ring-2 ring-background"> <img src="/avatars/2.png" alt="User 2" class="size-8 rounded-full object-cover ring-2 ring-background"> <img src="/avatars/3.png" alt="User 3" class="size-8 rounded-full object-cover ring-2 ring-background"> <div class="size-8 rounded-full bg-muted ring-2 ring-background flex items-center justify-center text-xs font-medium"> +5 </div> </div> ``` ### Avatar with Status Indicator ```html <div class="relative"> <img src="/avatar.png" alt="" class="size-10 rounded-full object-cover"> <span class="absolute bottom-0 right-0 size-3 rounded-full bg-green-500 ring-2 ring-background"></span> </div> <!-- Offline --> <div class="relative"> <img src="/avatar.png" alt="" class="size-10 rounded-full object-cover grayscale"> <span class="absolute bottom-0 right-0 size-3 rounded-full bg-gray-400 ring-2 ring-background"></span> </div> <!-- Busy --> <div class="relative"> <img src="/avatar.png" alt="" class="size-10 rounded-full object-cover"> <span class="absolute bottom-0 right-0 size-3 rounded-full bg-red-500 ring-2 ring-background"></span> </div> <!-- Away --> <div class="relative"> <img src="/avatar.png" alt="" class="size-10 rounded-full object-cover"> <span class="absolute bottom-0 right-0 size-3 rounded-full bg-yellow-500 ring-2 ring-background"></span> </div> ``` ### Avatar with Badge ```html <div class="relative"> <img src="/avatar.png" alt="" class="size-12 rounded-full object-cover"> <span class="absolute -top-1 -right-1 size-5 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-medium"> 3 </span> </div> ``` ### Avatar in Navigation ```html <nav class="flex items-center justify-between p-4 border-b"> <div class="font-bold">Logo</div> <div class="dropdown-menu"> <button type="button" class="flex items-center gap-2" aria-haspopup="menu" aria-expanded="false"> <img src="/avatar.png" alt="John Doe" class="size-8 rounded-full object-cover"> <span class="hidden sm:inline text-sm">John Doe</span> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="m6 9 6 6 6-6"></path> </svg> </button> <nav role="menu"> <!-- Menu items --> </nav> </div> </nav> ``` ## Grayscale Effect ### Inactive/Offline Users ```html <div class="flex -space-x-2"> <img src="/avatars/1.png" alt="" class="size-8 rounded-full object-cover ring-2 ring-background"> <img src="/avatars/2.png" alt="" class="size-8 rounded-full object-cover ring-2 ring-background grayscale"> <img src="/avatars/3.png" alt="" class="size-8 rounded-full object-cover ring-2 ring-background"> </div> ``` ## JavaScript Integration ### Generating Initials ```javascript function getInitials(name) { return name .split(' ') .map(part => part.charAt(0)) .join('') .toUpperCase() .slice(0, 2); } // Usage getInitials('John Doe'); // "JD" getInitials('Jane'); // "J" getInitials('John Michael Doe'); // "JM" ``` ### Random Color Based on Name ```javascript function getAvatarColor(name) { const colors = [ 'bg-red-500', 'bg-blue-500', 'bg-green-500', 'bg-yellow-500', 'bg-purple-500', 'bg-pink-500', 'bg-indigo-500', 'bg-teal-500', 'bg-orange-500' ]; let hash = 0; for (let i = 0; i < name.length; i++) { hash = name.charCodeAt(i) + ((hash << 5) - hash); } return colors[Math.abs(hash) % colors.length]; } // Usage const colorClass = getAvatarColor('John Doe'); ``` ### Image Load Error Handling ```javascript document.querySelectorAll('.avatar-img').forEach(img => { img.addEventListener('error', function() { this.style.display = 'none'; const fallback = this.nextElementSibling; if (fallback) { fallback.style.display = 'flex'; } }); }); ``` ## Accessibility Guidelines ### Alt Text ```html <!-- Descriptive alt for profile avatars --> <img src="/avatar.png" alt="John Doe's profile picture" class="size-10 rounded-full"> <!-- Empty alt for decorative avatars in list items where name is shown --> <img src="/avatar.png" alt="" class="size-10 rounded-full"> <span>John Doe</span> <!-- Alt for avatar groups --> <div class="flex -space-x-2" role="group" aria-label="Team members: John, Jane, Bob, and 5 more"> <!-- avatars --> </div> ``` ### Focus States ```html <button class="rounded-full focus:ring-2 focus:ring-ring focus:ring-offset-2"> <img src="/avatar.png" alt="Your profile" class="size-10 rounded-full"> </button> ``` ## Best Practices ### Image Optimization - Use appropriate image sizes (don't use 500px images for 40px avatars) - Consider using WebP format - Implement lazy loading for lists ### Fallback Strategy 1. Try to load image 2. On error, show initials 3. If no name available, show generic icon ### Sizing Guidelines | Size | Class | Use Case | |------|-------|----------| | 24px | `size-6` | Compact lists, inline mentions | | 32px | `size-8` | Comments, small lists | | 40px | `size-10` | Standard lists, cards | | 48px | `size-12` | Profile headers | | 64px | `size-16` | Profile pages | ### Color Consistency - Use consistent colors for the same user - Consider accessibility when choosing background colors - Ensure text has adequate contrast