@bmartinezcalvo What do you think should happen when button text is too long? I've suggested hiding the overflow and adding an ellipsis, like we do with overly-long descriptions in MenuItems, but I'm interested to hear if you have a different idea.

In T309408#7963893, @AnneT wrote:

@bmartinezcalvo What do you think should happen when button text is too long? I've suggested hiding the overflow and adding an ellipsis, like we do with overly-long descriptions in MenuItems, but I'm interested to hear if you have a different idea.

@AnneT I agree with the ellipsis when the text exceeds the maximum characters. Anyway, we should define a maximum characters for all buttons and I suggested @Jacqui.Clydesdale in her UX Writing recommendations for components to have 32 characters maximum for buttons.

I think 32 characters maximum is the perfect number of characters because on 320px screens (mobile) the button text doesn't jump to 2 lines and respects both the screen margin (16px) and the button padding (12px).

We could implement a maximum of 32 characters and display ellipsis when the text is longer than these characters. What do you think?

@bmartinezcalvo (cc @Jacqui.Clydesdale) I would strongly recommend avoiding character limits, since we can't account for what the limit would mean in every language we support. It might be reasonable in the languages we're familiar with, but could cause issues for other languages. Because of this, we need to support the situation where text could be too long for a reasonably-sized button.

Of course, we can include a written recommendation to keep button text short. But we shouldn't add a hard character limit.

In T309408#7970053, @AnneT wrote:

@bmartinezcalvo (cc @Jacqui.Clydesdale) I would strongly recommend avoiding character limits, since we can't account for what the limit would mean in every language we support. It might be reasonable in the languages we're familiar with, but could cause issues for other languages. Because of this, we need to support the situation where text could be too long for a reasonably-sized button.

Of course, we can include a written recommendation to keep button text short. But we shouldn't add a hard character limit.

@AnneT yes, the 32 characters maximum documented in the UX Writing doc is only a recommendation for users that want to learn more about UX writing for their projects. So, it would be a recommendation but we don't need to limit the component with 32 max characters.

We could do the following:

• Recommend 32 characters maximum in the UX Writing recommendations
• Implement the component with 1 text line maximum and ellipsis when the text is longer (always respecting the 12px padding on left and right with the button)

Normally I'd close the newer one T309825 as duplicate of this, but the task description by @EUdoh-WMF is excellent, hence closing here and copying important pieces over.