Text in buttons shouldn't be centered

[lyubomir-popov]

Component/pattern to amend

When placed in narrow containers, this happens:

Visual

Provide a screenshot or link to a prototype of your pattern amendment.

Context

In what context does your amendment solve a problem?

[danielmutis]

WG: @lyubomir-popov provide solution for this case.

When does this actually happen? Provide examples. The expected behaviour should be that the button becomes as long as the text, unless something is limiting it.

[carkod]

I think he means on this page

[danielmutis]

WG:

• If the text wraps the label should be left aligned
• We need to have a guideline that strongly advises against long labels on buttons

[pastelcyborg]

Some thoughts:

1. There is no consistent way to predict if text will wrap using HTML/CSS, so any form of logic based on this condition is not plausible
2. It would be quite unusual for a button with multiple lines of text to have the text left-aligned - I have rarely seen this pattern, presumably because it looks odd

I would recommend leaving the existing button styles as-is and providing more thorough guidance on maximum lengths of button text in our documentation.

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-13784.

This message was autogenerated

[bartaz]

@danielmutis Do you recall what was the decision/comment from WG last week? How do we want to address it?

[danielmutis]

• We want to strongly advice against long text in buttons. We might limit the amount of characters that can be used on a button to avoid this.
• If there was no other choice, the text would be aligned left.
• This may be related to the buttons on the SSO project, which are wider than the content, so the content remains left-aligned.