===Background
Currently, all input elements in Codex inherit an absolute height of 32px from their parent `cdx-text-input`Codex buttons don't feature a specific line-height. They also don't have any inline padding applied to them. Both conditions prevent buttons from correctly adjusting to bigger font sizes: for example, whenever the browser's default font size is increased to satisfy accessibility needs.
{F35262967}
Using absolute units in this context becomes problematic, since they prevent the components from adjustingHere are some examples of the visual aspect of Codex buttons in Chrome when the font size of the browser is increased (e.g. to "Very large" in Chrome, to "24" in Safari – which are default options provided by said browsers). The inputs become too narrow and, in the case of Safari, hardly usable.is changed to "Very large" in the Appearance settings (24px):
| TahS in Chrome's "Very large" font configuration | TahS in Safari's 24px font configuration|
| {F35262972} | {F35262977}|Button component | Combobox* | ToggleButton |
| {F35263330} | {F35263333} | {F35263337} |
*Please note that the issue related to the also unresponsive size of text inputs is covered by this separate task: T311115
===Goal
InputsButtons should scale to display correct proportions and proper spacing around their values. A good example of this would be the current vector 2022/WVUI TypeaheadSearch component:text.
===Considerations
{F35262996}The solution might consist on specifying a line-height for Button (probably `@line-height-component`, to keep its height aligned with the rest of Codex elements) and default inline paddings (of 4px, in order to match that of other components).
===ConsiderationsWe should apply an approach and values that make buttons to reshape in a way that's consistent with the rest of system elements (e.g. apply same padding values to inputs and buttons, apply same line-height, specify the same relative height...)
We might want to specify 32px as a `min-height` instead. This way, inputs will be correctly resized thanks to the increase of their relative line height.
Specifying a `min-height` will also ensure that Codex components maintain a system size in contexts where font size is reduced (e.g. Monobook skin).
===ACs
[] The height of Codex inputButton components increases proportionally with font size