Min height or combination of line-height and padding to build button and similar components

[Febakke]

Draft While working with our new sizing we looked into how our buttons was built. Today we use min height to set the height of our buttons.

Min-height

pros:

• Simple solution with good control over the height of our button and other similar components.

Cons:

• No padding if the button have to much text and breaks down into two or more lines on small screens.
  • You could argue that this is something that should never happen, and we shouldent make a component that support this.

Design systems that use min-height: (as I understand the code 😅) designsystem.dk Punkt (Height) Jøkul (Height)

Combination of line-height and padding

pros

• (maybe) Better controll of the relation between text and spacing. Can be sure that all spacing is within 4x (4-gangen)

Cons:

• We need to use pixels in Figma to overwrite the line-height
  • This will give us a much more complicated typography system
• If we are going to get the height we want on our buttons we need to use spacing that is not in our scale (10px for instance) How are we going to solve this?
  • Too make this work I think we would need to have sizes corresponds with 4x. This will probably make it so that we have a bigger difference between the sizes... Maybe.

Design systems that use this method: (as I understand the code 😅) Aksel designsystem.arbetsformedlingen.se Gov.uk

### Tasks
- [ ] https://github.com/digdir/designsystemet/issues/1726
- [ ] Consider to use only line-height to make the height of the components correct (remove min-height?)

[Febakke]

Im a little lost on what we discussed last time, but couldent this work? 1.5 rem lineheight on all button components and ramp up padding and text size. If the size of line-height is not based on the text size within the button. @Thuneer