Description

The Button component of @wordpress/components has incorrect padding with text, icon and iconPosition="right".

It applies the same reduced padding to the left and normal padding on the right, which is intended to improve the look of the button with an icon on the left.

This results in a button looking uneven when it has an icon on the right. With the text too close to the left side and the button too far from the right.

Step-by-step reproduction instructions

import { Button } from `@wordpress/components`;
import { wordpress } from `@wordpress/icons`;

function HelloWordPress() {
  return (
    <Button text="Hello" icon={wordpress} iconPosition="right" />
  );
}

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes