Change the position of button text and button icon

Question

I have a button which contains an icon and some text. I want this button to be reusable. I also want to have the option of putting the icon left of the text or right of the text. I am passing in a prop (either "right" or "left") which will then adjust the CSS. Could anyone help me out with the CSS to swap the position of these two.

export const IconButton = ({icon,text, position}) => {
  return (
    <StyledIconButton className={position}>
      <img src={icon} />
      {text}
    </StyledIconButton>
  );
};

The StyledIconButton has a few default styles, but nothing important.

I am trying to use float but haven't been successful. Ideally I would avoid using flexbox as well.

.right {
   img {
    float: left;
    margin-right: 0.375rem;
  }
}
.left {
  img {
    float: right;
    margin-left: 1.5rem;
  }
}

As requested I am adding in the styles for StyledIconButton :

.styledbutton {
  display: flex;
  font-size: 1rem;
  line-height: 2rem;
}

The above code won't actually swap the position.

Answer 1

I think using a flexbox and switching the direction would be the easiest way. You can learn about flexboxhere .

But you can set left and right classes to decide on the direction of the flex.

.right {
   flex-direction: row-reverse;
}
.left {
  flex-direction: row;
}

And you would have set spacing and all other required styles on text and img separately, but this should do the trick