Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Button: Icon-only visual issues

See original GitHub issue

What package(s) are you using?

carbon-components
carbon-components-react

Detailed description

Describe in detail the issue you’re having.

Icon only buttons when using the ghost variant have incorrect padding so icon isn’t centered
double focus outline inherited from the icon tooltip component

Is this issue related to a specific component?

Button

What did you expect to happen? What happened instead? What would you like to see changed?

ghost icon-only buttons have the icon centered
Focus only has 1 border

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

v10.4.1

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Watson Health Design Pattern & Asset Library

Steps to reproduce the issue

hover over ghost icon-only button to see the background color
focus on any icon-only button

Please create a reduced test case in CodeSandbox

https://codepen.io/elizabethsjudd/pen/JgpWeP

Additional information

Issue Analytics

State:
Created 4 years ago
Comments:6 (6 by maintainers)

Top GitHub Comments

1reaction

aagonzalescommented, Feb 18, 2020

The icon-only button started as a Sketch hack so we didn’t always have to re-create it in the Sketch file. However, the icon only ghost button is now being updated in code to match the Sketch icon button and we will be moving icon button in the Sketch file under the button component.

Available in v10.10 closing because PR is merged. Related issue: https://github.com/carbon-design-system/carbon/issues/5312 PR: https://github.com/carbon-design-system/carbon/pull/5313

1reaction

shixiedesigncommented, Aug 8, 2019

At the moment there wasn’t any need for other variants. If you’d like to add ghost icon buttons, could you provide full page product screens / ghost icon buttons in context so we can understand the usage? Icon buttons are newly added and still waiting to be stress-tested. This is a good opportunity to write some usage documentation if you have any suggestions.

That said, we do have icon buttons in the toolbar, so perhaps by “ghost icon buttons”, you could also use the toolbar which offers a more subtle hover state.