An Icon only button doesn't have a border

Expected Behavior

The <Button> component should have a border if an the icon property is used and the label and children are not present. I would expect the border to be gone only if I have used the plain property.

Actual Behavior

If only the icon property is used, the button will have no border, and the border radius from the theme is not applied. The exception to this is if you use the primary prop as well, which will cause the button to render as expected.

URL, screen shot, or Codepen exhibiting the issue

In the following codepen you can see the various states of an icon-only button. I’ve added a border style to highlight the lack of border radius in the styled component.

https://codesandbox.io/s/x3oz9jp18p

Steps to Reproduce

import React from "react";
import ReactDOM from "react-dom";
import { Grommet, Button } from "grommet";
import { Facebook } from "grommet-icons";

function App() {
  return (
    <Grommet>
      <Button icon={<Facebook />}  />
    </Grommet>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Your Environment

• Grommet version: v2.6.6
• Browser Name and version: https://www.whatsmybrowser.org/
• Operating System and version (desktop or mobile): OS X 10.13.6

[LucianBuzzo]

Thanks for the clarification @dallas

TLDR: Setting plain to false explicitly will give an icon-only button padding and a border

<Button icon={<Facebook />} plain={false} />

[dallas]

And here’s a forked version of your Code Sandbox showing the 3 different states as well.