Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Button with icon is misaligned vertically #12681
Mac OS High Sierra, Chrome 69, Firefox 62
Steps to reproduce
As shown in codesandbox: Place two or more Button components next to each other. Specify icon property on one of the buttons.
What is expected?
When arranging several circle buttons next to each other in-line, all buttons should have equal vertical alignment
What is actually happening?
Buttons with icon are dropped several pixels below the line in Chrome and raised in Firefox
@afc163 I was using empty circle buttons with custom background color while making a color picker. I wanted to utilise the hover effect of the antd Button, and in terms of semantics using the element here makes sense. My workaround is to add a "." character to the "empty" buttons and apply "text-indent: -9999px". And yes, I can confirm that the issue is within the empty buttons and not icon buttons.