Reference specimen. Example copy comes from the Pelote specs and is in French.
LiveMême dialogue en anglais, français et allemand
Écran large
Téléphone (280 px)
Les boutons ont une largeur au contenu et flex-wrap : dès que le texte ne tient plus côte à côte, ils passent en pile, pleine largeur. Choisis une langue pour voir l'allongement (allemand : +35 %).
UX / UIBoutons avec un texte trop long : quoi faire
check_circleÀ faire
Server neu starten?Etwa eine Minute angehalten.
Les boutons passent en pile, pleine largeur, l'action principale en haut. Rien n'est coupé.
cancelÀ éviter
Server neu starten?
Largeur fixe et texte tronqué (« Server jetzt n… ») : on ne sait plus ce que le bouton fait.
check_circleÀ faire
Si c'est encore trop long, on raccourcit la phrase dans cette langue : un verbe, éventuellement un complément.
cancelÀ éviter
Un libellé sur deux lignes dans la pilule : le bouton se déforme et se lit mal.
cancelÀ éviter
Réduire la police pour que ça rentre : illisible, et la hiérarchie entre boutons disparaît.
cancelÀ éviter
Une rangée qui déborde du conteneur et coupe le bouton principal hors champ.
check_circleÀ faire
Zitternde HändeSchweißausbrüchePlötzlicher Hunger
Chips : le groupe passe à la ligne, chaque chip garde son libellé entier.
cancelÀ éviter
Libellés de navigation tronqués : chaque destination doit tenir en un mot court dans toutes les langues (« Réglages », « Optionen »).
infoReference specimen. Example copy comes from the Pelote specs and is in French.
How components hold up when the text changes language: French and English at minimum, with text that can grow by 35% (German).
Rules
Complete strings from translation files, never concatenated, and containers that let text decide the width.
Long button text: width follows content, the row uses flex-wrap so buttons stack full width with the primary action on top, then shorten the sentence in that language.
Avoid fixed widths, ellipsised labels, two-line labels in a pill, smaller fonts and rows overflowing their container.
Chips wrap, navigation labels fit in one word, headings and paragraphs wrap freely with no fixed height.