IconButton24px [counter-example] v1.0.0

A modal close (×) button styled as a bare icon with no padding. The clickable area is 16×16 CSS pixels — well below the WCAG 2.2 AA 24×24 minimum and a third of the Apple/Material 44×44 recommendation. On a phone, the user taps three times before hitting it.

Label

Modal Close Button Sized To The 16px Icon

Bad Code

<button className="close" onClick={onClose} aria-label="Close">
<svg width="16" height="16" viewBox="0 0 16 16">
<path d="M4 4 L12 12 M12 4 L4 12" stroke="currentColor" strokeWidth="2" />
</svg>
</button>

/* CSS */
.close {
background: transparent;
border: none;
padding: 0;
cursor: pointer;
width: 16px;
height: 16px;
}

Why Bad

• 16×16 hit area fails WCAG 2.2 SC 2.5.8 (24×24 minimum, Level AA)
• Below Apple HIG (44×44) and Material 3 (48×48) recommendations — fails finger imprecision tolerance
• On a 5.5" phone at typical density, 16px ≈ 2.7mm — smaller than the ~8mm fingertip contact area
• No :focus-visible styling — keyboard users hitting the button see no indication of focus
• Adjacent UI (modal content edge) is within 8px of the button — increases mis-tap rate

Good Code

<button className="close" onClick={onClose} aria-label="Close">
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="M4 4 L12 12 M12 4 L4 12" stroke="currentColor" strokeWidth="2" />
</svg>
</button>

/* CSS */
.close {
background: transparent;
border: none;
cursor: pointer;
/* 16px icon + 14px padding each side = 44×44 hit area */
width: 44px;
height: 44px;
padding: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
}
.close:hover { background: var(--surface-2); }
.close:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}

Why Good

• 44×44 hit area exceeds WCAG 2.2 SC 2.5.8 (24×24) and meets Apple HIG / Material 3 comfort recommendations
• Icon visually stays at 16×16 but the clickable area expanded by padding — visual design unchanged
• aria-hidden='true' on the SVG keeps the aria-label='Close' as the sole accessible name (no double-announce)
• :focus-visible ring gives keyboard users a clear target indicator
• Hover/focus background fills the 44×44 area — affordance now matches hit area, no ambiguity

Anti Pattern

@community/anti-pattern-tiny-touch-targets

IconButton24px [counter-example] v1.0.0

A modal close (×) button styled as a bare icon with no padding. The clickable area is 16×16 CSS pixels — well below the WCAG 2.2 AA 24×24 minimum and a third of the Apple/Material 44×44 recommendation. On a phone, the user taps three times before hitting it.

Label

Modal Close Button Sized To The 16px Icon

Bad Code

<button className="close" onClick={onClose} aria-label="Close">
<svg width="16" height="16" viewBox="0 0 16 16">
<path d="M4 4 L12 12 M12 4 L4 12" stroke="currentColor" strokeWidth="2" />
</svg>
</button>

/* CSS */
.close {
background: transparent;
border: none;
padding: 0;
cursor: pointer;
width: 16px;
height: 16px;
}

Why Bad

• 16×16 hit area fails WCAG 2.2 SC 2.5.8 (24×24 minimum, Level AA)
• Below Apple HIG (44×44) and Material 3 (48×48) recommendations — fails finger imprecision tolerance
• On a 5.5" phone at typical density, 16px ≈ 2.7mm — smaller than the ~8mm fingertip contact area
• No :focus-visible styling — keyboard users hitting the button see no indication of focus
• Adjacent UI (modal content edge) is within 8px of the button — increases mis-tap rate

Good Code

<button className="close" onClick={onClose} aria-label="Close">
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="M4 4 L12 12 M12 4 L4 12" stroke="currentColor" strokeWidth="2" />
</svg>
</button>

/* CSS */
.close {
background: transparent;
border: none;
cursor: pointer;
/* 16px icon + 14px padding each side = 44×44 hit area */
width: 44px;
height: 44px;
padding: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
}
.close:hover { background: var(--surface-2); }
.close:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}

Why Good

• 44×44 hit area exceeds WCAG 2.2 SC 2.5.8 (24×24) and meets Apple HIG / Material 3 comfort recommendations
• Icon visually stays at 16×16 but the clickable area expanded by padding — visual design unchanged
• aria-hidden='true' on the SVG keeps the aria-label='Close' as the sole accessible name (no double-announce)
• :focus-visible ring gives keyboard users a clear target indicator
• Hover/focus background fills the 44×44 area — affordance now matches hit area, no ambiguity

Anti Pattern

@community/anti-pattern-tiny-touch-targets

Label

Modal Close Button Sized To The 16px Icon

Bad Code

<button className="close" onClick={onClose} aria-label="Close">
<svg width="16" height="16" viewBox="0 0 16 16">
<path d="M4 4 L12 12 M12 4 L4 12" stroke="currentColor" strokeWidth="2" />
</svg>
</button>

/* CSS */
.close {
background: transparent;
border: none;
padding: 0;
cursor: pointer;
width: 16px;
height: 16px;
}

Why Bad

• 16×16 hit area fails WCAG 2.2 SC 2.5.8 (24×24 minimum, Level AA)
• Below Apple HIG (44×44) and Material 3 (48×48) recommendations — fails finger imprecision tolerance
• On a 5.5" phone at typical density, 16px ≈ 2.7mm — smaller than the ~8mm fingertip contact area
• No :focus-visible styling — keyboard users hitting the button see no indication of focus
• Adjacent UI (modal content edge) is within 8px of the button — increases mis-tap rate

Good Code

<button className="close" onClick={onClose} aria-label="Close">
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
<path d="M4 4 L12 12 M12 4 L4 12" stroke="currentColor" strokeWidth="2" />
</svg>
</button>

/* CSS */
.close {
background: transparent;
border: none;
cursor: pointer;
/* 16px icon + 14px padding each side = 44×44 hit area */
width: 44px;
height: 44px;
padding: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
}
.close:hover { background: var(--surface-2); }
.close:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}

Why Good

• 44×44 hit area exceeds WCAG 2.2 SC 2.5.8 (24×24) and meets Apple HIG / Material 3 comfort recommendations
• Icon visually stays at 16×16 but the clickable area expanded by padding — visual design unchanged
• aria-hidden='true' on the SVG keeps the aria-label='Close' as the sole accessible name (no double-announce)
• :focus-visible ring gives keyboard users a clear target indicator
• Hover/focus background fills the 44×44 area — affordance now matches hit area, no ambiguity

Anti Pattern

@community/anti-pattern-tiny-touch-targets