Basecoat UI MCP

<!-- Basecoat Button Group Component --> <div class="space-y-8"> <!-- Basic Button Group --> <div role="group" class="button-group"> <button type="button" class="btn-outline">Left</button> <button type="button" class="btn-outline">Center</button> <button type="button" class="btn-outline">Right</button> </div> <!-- Button Group with Icons --> <div role="group" class="button-group"> <button type="button" class="btn-icon-outline" aria-label="Bold"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"></path> </svg> </button> <button type="button" class="btn-icon-outline" aria-label="Italic"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <line x1="19" x2="10" y1="4" y2="4"></line> <line x1="14" x2="5" y1="20" y2="20"></line> <line x1="15" x2="9" y1="4" y2="20"></line> </svg> </button> <button type="button" class="btn-icon-outline" aria-label="Underline"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M6 4v6a6 6 0 0 0 12 0V4"></path> <line x1="4" x2="20" y1="20" y2="20"></line> </svg> </button> </div> <!-- Vertical Button Group --> <div role="group" class="button-group" data-orientation="vertical"> <button type="button" class="btn-icon-outline" aria-label="Zoom in"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M5 12h14"></path> <path d="M12 5v14"></path> </svg> </button> <button type="button" class="btn-icon-outline" aria-label="Zoom out"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M5 12h14"></path> </svg> </button> </div> <!-- Button Group with Separator --> <div role="group" class="button-group"> <button type="button" class="btn-secondary">Copy</button> <hr role="separator"> <button type="button" class="btn-secondary">Paste</button> </div> <!-- Button Group with Input --> <div class="button-group"> <input type="text" class="input" placeholder="Search..."> <button type="button" class="btn-icon-outline"> <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <circle cx="11" cy="11" r="8"></circle> <path d="m21 21-4.3-4.3"></path> </svg> </button> </div> </div>