@wordpress/ui: Minimal IconButton hover state shows corner artifacts #79501

Description

When hovering a minimal IconButton, the hover background can show visible corner artifacts at high zoom. The button appears to render as two slightly different rounded shapes around the corners, producing a faint stepped/halo effect.

This is most noticeable on compact icon-only buttons, such as:

<IconButton
	variant="minimal"
	tone="neutral"
	size="small"
	icon={ icon }
	label="Show sidebar"
/>

Screenshot

This is two minimal buttons zoomed way in, you can see the weird artifacts around the corners.

Steps to reproduce

1. Render an @wordpress/ui IconButton with variant="minimal", tone="neutral", and size="small".
2. Hover the button.
3. Zoom in on the button corners, or inspect on a high-density display.

Expected behavior

The hover state should render as one clean rounded rectangle, with smooth corners and no visible secondary edge.

Actual behavior

The hover state shows faint artifacts around the rounded corners, as if the border and background are being painted as separate rounded shapes.

Suspected cause

The Button primitive appears to combine:

• border-width: 1px
• border-radius: var(--wpds-border-radius-sm)
• background-clip: padding-box
• hover/focus/active styles that update both background-color and border-color

For minimal buttons, the hover background and hover border are visually very similar, but because the background is clipped to the padding box, the antialiasing of the border radius and the background radius can separate at high zoom.

Possible fix

Consider making minimal buttons paint the hover state as a single rounded shape. For example, the minimal variant could keep a transparent border for sizing but allow the hover background to paint through the border box, or otherwise avoid coloring both a clipped background and a separate border on hover.

Package

@wordpress/ui

Version observed

@wordpress/ui@0.14.0