react
react copied to clipboard
Button props spilling to DOM element
Description
The Button props leadingIcon, trailingIcon, variant and size are being passed down to the button or custom (polymorphic) component, leading to React warnings like
Warning: React does not recognize the `leadingIcon` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `leadingicon` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
This happens because these props are not destructured like the others, however they serve no purpose outside the ButtonBase logic:
https://github.com/primer/react/blob/9eaa37e98b8cd12a0b953f190bcbff0f26a3dd22/src/Button/ButtonBase.tsx#L11 https://github.com/primer/react/blob/9eaa37e98b8cd12a0b953f190bcbff0f26a3dd22/src/Button/ButtonBase.tsx#L20
Steps to reproduce
With this code using react-router
<Button variant="outline" leadingIcon={MarkGithubIcon} as={Link} to="/github">Test</Button>
and development mode, check the console logs, they should give the warning mentioned above.
Version
v35.6.0
Browser
Chrome