NO BUG: Unable to left-justify text in a button

Bugs
1

It is not possible to left-justify the text in a button. While the text-align: left; property is set, the content of the button is set to justify-content: center; if the width of the button is set greater than the width of the content inside it, you’ll see it is not aligned properly.

2

Hi Jamie,
Thanks so much for your report!

The default styles for the button element are as follows:

    .bricks-button {
        align-items: center;
        border-width: 0;
        display: inline-flex;
        gap: 10px;
        justify-content: center;
        letter-spacing: .5px;
        padding: .5em 1em;
        text-align: center
    }

To change the alignment of the text within the button, it is not enough to change text align, as the text is primarily influenced by justify-content. You can change this under Style » Layout » Align main axis. Alternatively, you can set the display value of the button to block—then text-align would suffice.

Best regards,
timmse

3

Hi @timmse

OK, but I don’t want to have to do that on every button instance…

4

You don’t have to. You can overwrite the defaults if you don’t want to use them:

.brxe-button {
  display: block;
}

Or you can use the text-link element and build a custom button component from it, which gives you significantly more flexibility and significantly fewer defaults.

5

Indeed. But it makes most sense to me to use a button element for this, because it’s a button with just a slight style variation and a different text alignment. Given that the other buttons and their styling can be controlled centrally in the theme settings, creating a different system and class for a variation of a button seems messy. Compounded by the idea that you can apparently change the alignment of text for a button globally, but not really, because it has no effect. I could create my own classes for buttons, but then what is the point of the button element theme-wide settings.