Flux:buttons are at different vertical offsets and sizes, depending on content

[rikh42]

This means that they appear out of line, with some higher up than other.

For example, with the following markup...

<div class="my-12">
    <flux:button icon-trailing="chevron-down">Layout</flux:button>
    <flux:button icon-trailing="chevron-down"></flux:button>
    <flux:button><flux:icon.chevron-down /></flux:button>
    <flux:button square><flux:icon.chevron-down /></flux:button>
</div>

Results in the following buttons that are all over the place...

I have tried this in Chrome and Firefox, with the same result.

I would expect all the buttons to have the same vertical height and same baseline

Thank you!

[jeffchown]

@rikh42 See @calebporzio 's response (underneath my comment) here #499 (comment)

[rikh42]

OK, but is it possible to create a flux:button with only an icon in it, that lines up with a flux:button that also contains text?

In the example above, the only difference between the first two is that the first also has some text content.

If I adjust the other two, which involve a separate flux:icon, to use the micro size, they still don't line up with the first example.

[jeffchown]

@rikh42 I usually wrap my button groups like this:

<div class="flex items-center space-x-3">
    <flux:button type="submit" variant="primary">Save</flux:button>

    <flux:button type="button" variant="danger">Cancel</flux:button>

    ...more buttons...
</div>

That way, as long as the buttons are the same height, they will align properly.