Skip to content

Commit

Permalink
fix(button): remove reduced padding for icons
Browse files Browse the repository at this point in the history
When a button has an icon, we used to reduce padding on the side where
the icon is to make it look more balanced. Unfortunately, this only
really has the desired effect for icons with a lot of whitespace (e.g.
checkmarks), and looks broken for more "busy" icons (e.g. file upload).

This commit removes special padding treatment for icons. The padding is
always the same, whether there is an icon or not. This looks much better
for the more busy icons, and still pretty good for icons with more
whitespace.
  • Loading branch information
andreasphil committed Sep 11, 2024
1 parent e7baa7f commit e546ce8
Showing 1 changed file with 2 additions and 16 deletions.
18 changes: 2 additions & 16 deletions src/primevue/button/button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,27 +22,13 @@ const button: ButtonPassThroughOptions = {
let small = tw`ris-body2-bold h-48 py-4`;
let large = tw`ris-body1-bold h-64 py-4`;

// Icon position
const iconPos = props.iconPos ?? "left";

// Icon + label
if (instance.hasIcon && props.label) {
if (iconPos === "left") {
small = tw`${small} pl-8 pr-16`;
large = tw`${large} pl-20 pr-24`;
} else if (iconPos === "right") {
small = tw`${small} pl-16 pr-8`;
large = tw`${large} pl-24 pr-20`;
}
}

// Icon only
else if (instance.hasIcon && !props.label) {
if (instance.hasIcon && !props.label) {
small = tw`${small} w-48 px-4`;
large = tw`${large} w-64 px-4`;
}

// Label only
// Label only or label + icon
else {
small = tw`${small} px-16`;
large = tw`${large} px-24`;
Expand Down

0 comments on commit e546ce8

Please sign in to comment.