struct Mark

A small stroked symbol — a close cross, a plus — drawn as lines.

Not a character: a Text("×") is a box the height of the font's line with the mark sat on the baseline, so it is never centred in anything and its hover fill is a tall strip. Two capsule strokes are centred by construction, the size the caller says, and cost what one glyph does.

No input of its own. Put it inside the stack that is the button, so the click target and the hover fill are the button's padded box:

HStack(padding: 0, alignment: .center, onClick: close) {
    Mark(.cross, size: 10, color: theme.textDim)
}
.padding(4)
.hoverBackground(theme.hover)