Icon Only Button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Icon-Only Buttons</title>
    <style>
        /*
         Component: Icon-Only Buttons
         Description: A set of accessible, compact buttons for common UI actions.
        */

:root {
            --icon-btn-size: 44px; /* A good minimum size for touch targets */
            --icon-btn-bg: transparent;
            --icon-btn-bg-hover: #e9ecef;
            --icon-btn-icon-color: #495057;
            --icon-btn-icon-color-danger: #dc3545;
            --icon-btn-focus-outline: #007bff;
        }

.icon-btn-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            padding: 2rem;
            background-color: #f8f9fa;
        }

.icon-btn-1 {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: var(--icon-btn-size);
            height: var(--icon-btn-size);
            
            color: var(--icon-btn-icon-color);
            background-color: var(--icon-btn-bg);
            
            border: none;
            border-radius: 50%;
            cursor: pointer;
            text-decoration: none;
            
            transition: background-color 0.15s ease-in-out;
        }

.icon-btn-1 svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
        }

.icon-btn-1:hover {
            background-color: var(--icon-btn-bg-hover);
        }

/* --- Modifier for a 'danger' action --- */
        .icon-btn-1.danger:hover {
            color: var(--icon-btn-icon-color-danger);
            background-color: rgba(220, 53, 69, 0.1);
        }
        
        .icon-btn-1:focus-visible {
            outline: 2px solid var(--icon-btn-focus-outline);
            outline-offset: 2px;
        }
    </style>
</head>
<body>

<button type="button" class="icon-btn-1 danger" aria-label="Delete item">
            <svg aria-hidden="true" height="24" width="24" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></svg>
        </button>
    </div>

</body>
</html>