Align button heights with input fields

[uxkai]

Product owner: @manuelaugustin UX designer: @uxkai

What are we going to build?

• Rename the current Large button in our UI library to Extra large button.
• Introduce a new button size in our UI library: Large, which will get the same height (40px) as our input fields, selects, and other elements mentioned below.
• Modify the button and input field (and some other UI elements listed below) styling in our UI library by replacing the existing border that surrounds the button component with the Tailwind class ‘ring-inset’. This change will ensure that the border is on the inside of the component, not affecting its height or width.
• Make subtle changes to the current buttons in our UI library to create a logical size progression from Small to Extra large (Small = 28px, Default = 36px, Large = 40px, Extra large = 44px).

What problem does it solve?

Currently, we do not have buttons that share the same height as input fields or selects when used side by side in our UI. We would like to align these heights to create a consistent look and feel, ensuring that buttons have compatible heights as input fields.

We currently have buttons with a height of 30px (Small), 34px (Default) or 46px (Large). The height of our input fields is 42px.

Designs

For a visual representation of these proposed changes, please refer to this Sketch document.

Components requiring border modifications: Next to all our buttons, replace the borders around the following components with a ‘ring-inset’ to make sure the height of these elements (40px) matches the height of the new ‘Large’ button (40px):

• Autocomplete
• Select
• Tag input
• Text input
• Text area

Additional info or requirements

In this proposal, for all button sizes the icon is 16 x 16px. (w-4 and h-4)