Button: size inconsistent

[ghost]

Describe the bug

Icon-only buttons do not properly change their rendered size when using the size prop.

As you can see, when using the Lara theme, in v4 syled mode the rounded icon-only buttons have the same size regardless of the value of the size prop.

In v3 styled mode, the rounded and rectangular size="large" icon-only buttons are a little bit wider than the other icon-only buttons.

In v3 unstyled mode, the rounded icon-only buttons do actually differ in size, but only the height changes. Of course rounded icon-only buttons should always resemble a perfect circle, not an egg.

Also in v3 unstyled mode, both rounded and rectangular size="small" icon-only buttons have a different height compared to their labeled counterparts. They are slightly taller than the size="small" ones with a label.

TL;DR:

The height of icon-only buttons should not differ compared to labeled buttons with the same size. Because they are icon-only Buttons, they should also have their width set to the same value as the height, resulting in rectangular Buttons resembling a square and rounded Buttons resembling a circle.

v4 styled

v3 styled

v3 unstyled

Reproducer

https://stackblitz.com/~/github.com/Peanut4287/buttons-v4-styled
https://stackblitz.com/~/github.com/Peanut4287/buttons-v3-styled
https://stackblitz.com/~/github.com/Peanut4287/buttons-v3-unstyled

PrimeVue version

3 & 4

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Chrome, Firefox

[cagataycivici]

Tracked at #7017