Semantic-UI-React: Wrong background color of a "basic" button in a group consisting of basic buttons

Bug Report

Create a button group of basic buttons. Make the last button have an icon. The icon will be rendered with a wrong background color:

Version

{
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.3",
}

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 21 (6 by maintainers)

Most upvoted comments

@ivangomes thanks for jumping in to try to help out here. Just a heads up, in your example, the button still has the icon prop on it. That adds a class name that removes horizontal padding on SUI icons, which is why there is no margin between the icon and the button text. Removing the prop will give the expected display.

https://codesandbox.io/s/basic-button-w-icon-wkwyp

<Button basic color="red">
    <Icon name="save" />
    Save
  </Button>

Closing again. No bug. This was a usage question for Stack Overflow.

brianespinosa on Jul 14, 2021

It’s not a menu. It’s a button.

meglio on Jul 14, 2021

Will this work?

https://codesandbox.io/embed/semantic-ui-react-forked-wpsm4?fontsize=14&hidenavigation=1&theme=dark&view=editor

meglio on Jul 13, 2021

@meglio please use the bug reporting form and include a codepen/sandbox showing the code used to render these components. We include that to make it as easy as possible to show an example of what you are experiencing. Without it we can only guess how you are using the components. I am happy to take a look at this with you as soon as there is code to evaluate.

Closing but will reopen with a codepen example.

brianespinosa on Jul 12, 2021