Button sizing inconsistency between text and icon-only buttons

[dauriamarco]

Text buttons and circle/square icon buttons use different sizing systems, causing confusion when used in button groups or in general.

Text Button Size	Height	Circle Button Equivalent	Height
Large	40px	Default/Large	40px
Default	32px	Small	32px
Small	28px	Extra Small	24px

Issues

• Same class names (.btn-sm, .btn-lg) produce different results between button types.
• A "default" text button visually matches a "small" circle button.
• Circle buttons have .btn-xs (24px) while text buttons don't.
• Button groups would have different sizes based on which type of buttons is being used.

Questions

• Should we align the sizing systems?
• Make class names semantically consistent?
• Make sizes consistent (same class = same height)?

WDYT? @panch1739 @hbxes

[dr-itz]

The ´.xs´ is special for the circle buttons only as those are used inside input fields, e.g. the +/- buttons in number input, calendar button, etc

[kfenner]

We need to align the buttons, otherwise this is a total mess, especially if we combine this e.g. in the button-group. I think we should align with iX where possible. I expect the outcome to be something like the following:

Variant 1:

Text Button Size	Height	Icon Button Equivalent	Height
Large	40px	Large	40px
Default	32px	Default	32px
Small	28px	Small	28px
		Extra Small	24px

Variant 2:

Removal of 28px intermediate size - 24px could be too small though as touch target!?

Text/Icon Button Size	Height
Large	40px
Default	32px
Small	24px

[panch1739]

@kfenner the minimum target is 24x24 px https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html, so we would be ok with that :) But im not sure if we should go to 28px, we haven't discussed this with iX

[dauriamarco]

@kfenner @panch1739 If it helps to better evaluate this, I’ve already implemented Variant 1 proposed by Kaspar (keeping 28px and reserving xs only for icon buttons) in #1215. It felt like the quickest solution for now, and I wanted to already draft a cleaner, less confusing starting point to build from.

Feel free to have a look at that PR to get a better feeling of how the refactoring would look and behave in practice. 👍