Buttons should probably be inline-flex instead of flex

Hi,

I can’t see a reason why Cwicly buttons are flex instead of inline-flex.
But I’m OK to be proven wrong :wink:

It causes some width side-effects (100%) and prevents displaying them on the same line.

Maybe there are use cases but it seems to me most of the time inline is better and doesn’t hurt.

2 Likes

I have the same thoughts, so I also gave my vote for this.
There are rare cases when a button should be 100% in width by default, as it currently is with “display: flex”.
It works well when the button is wrapped in a div that has “display: flex”, but not always do I want an extra wrapper.
When the button is used alone, I frequently find myself changing it to “inline-flex”.
So I agree with @yankiara that the default for buttons should be "inline-flex.

1 Like

Hi @yankiara,

This is a good point and completely valid, thank you.
Changing this could unfortunately cause issues with installations that rely on this particular display property.
We’re currently reviewing the defaults system and I can see that this is where this type of setting would be perfectly suited.

2 Likes

Good to know :slight_smile:

And don’t forget the button icon… I think some CSS like this could be added to defaults as well:

.cc-btn svg {
    fill: currentColor;
    height: 1.5em;
 }

Hi @yankiara,

Thank you for sharing this feature request!

Since 1.2.9.8, the Button’s block default display property is set to inline-flex.

Please note this change isn’t applied to installations with versions lower than 1.2.9.8.

1 Like