Button alignment outside of flex containers

[Deufel]

I noticed that if buttons have an SVG as its first element and its parent element is not a flex container then they will be slightly above a text first or text only button. Must be something to do with inline flex calculating the baseline (right?) I could not pinpoint the root cause.

the simplest way to replicate is to modify the button page to see the effect.

[felix-bohlin]

Yeah I totally need to do something about that, thanks for the issue! ❤️

[onokumus]

@layer components.base {
     :where(.button) {
        vertical-align: middle;
    }
}

[felix-bohlin]

Hey @Deufel, are you sure it's not just a matter of what how the icons are created?

The plus SVG in the docs for instance looks like this when you inspect it:

But the path inside that SVG looks like this:

So there's some extra space in the SVG that is or isn't needed. Am I completely off here?

[Deufel]

I don't think that the path matters that much, I think its more the height on the svg element itself. And when the height of the svg exceeds the height of the text in the button it will start to move the baseline up.

here is an exaggerated example I gave the height on that button 400 for the svg and you can see that the small icon is aligned with the text only button.