General Rules
Sometimes, the available space on products makes it necessary to use abbreviated forms of words (initialisms, acronyms, symbols or abbreviations).
- Rules
- Character Limitation
How to abbreviate
Step 1: Look for alternatives
Abbreviating words should be avoided as much as possible. In this sense, if the space available is not sufficient for the existing text, the first step should be to try to reformulate the label, simplifying it and reducing the number of characters
Total
Val.Total
Cambiar Precios de los Artículos
Modificar Precios de los Artículos de Ventas
Step 2: Remove articles
If it is not possible to use another term, instead of abbreviating one of the words, we should remove the articles in the label. These words are often merely accessory and it is likely that the label will be more readable without the article and abbreviations
Data Lançamento
Data do Lanç.
Plantillas Factura Recurrente
Plantillas de Factura Recurrente
Step 3: Search for the best abbreviation
If, at last, you realize that eliminating the articles is not enough to reach the available number of characters, you should look to see if there is already an approved abbreviation for that word in the Design System’s list of abbreviations in Portuguese or English.
If the label has two or more words, the word that is considered the most easily recognizable should be abbreviated.
Ref. Pagamento
Referência Pag.
Planificaciones de Fact.
Plan. de Factura
Dos & Dont’s
If it is necessary to add a new abbreviation, follow the advice below to create an abbreviated form and communicate it to the eXA team so that it can be added to the list.
Before creating an abbreviation, you should check whether there is already an approved abbreviation in the list of abbreviations. In case of doubt regarding the rules or possible exceptions, please contact the eXA team.
Do not abbreviate more than one word in the label:
Doc. Origem
Doc. Orig.
Financial Disc.
Fin. Disc.
Always put a period in the abbreviation:
doc. = documento
doc = documento
Always end in a consonant, not a vowel:
assoc. = associação
associ. = associação
cred. = credit
credi. = credit
Use the first letters of the word:
ant.= anterior
config.= configure
Do not use the same abbreviation for two or more words or different abbreviations for the same word:
sel./selec. = selecionar
desc. = desconto/descrição
decl./declar. = declaration
diff./differ. = difference
In conventional cases, you can use middle or end letters to distinguish between abbreviations:
licdo. = licenciado
Sra. = Senhora
Avoid using the plural in abbreviations, but if absolutely necessary for understanding, add the letter s:
movs. = movimentos
Banner
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Mobile | 70 | 320-567 px |
| Tablet | 90 | 567-992 px |
| Desktop | 110 | 992 px and larger |
Button
| Variation | Maximum number of characters | Maximum width of the component (if applicable) |
|---|---|---|
| Small | 40 | 160 px |
| Regular | 37 | 180 px |
| Large | 35 | 200 px |
Button Group
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Small | 26 | 100 px |
| Regular | 25 | 120 px |
| Large | 25 | 140 px |
Breadcrumbs
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| First element | 29 | 100 px |
| Rest of the elements | 42 | 140 px |
Checkbox
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Small | 65 | 220 px |
| Regular | 60 | 240 px |
| Large | 50 | 260 px |
Chips
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Extra Small | 35 | 120 px |
| Small | 33 | 120 px |
| Regular | 31 | 140 px |
| Large | 32 | 160 px |
Inline Message
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Title | 40 | N.A |
| Description | 110 | N.A |
Radio Button
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Small | 65 | 220 px |
| Regular | 60 | 240 px |
| Large | 50 | 260 px |
Status Indicator
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Unique Size (without icon) | 33 | 120 px |
| Unique Size (with icon) | 24 | 120 px |
Stepper
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Unique Size | 31 | 120 px |
Switch
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Small | 59 | 220 px |
| Regular | 53 | 240 px |
| Large | 48 | 260 px |
Tabs
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Unique Size | 25 | 140 px |
Inputs
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Label | 41 | 150 px |
| Help text | 56 | 200 px |
Toast
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Unique Size | 78 (1 line) | 276 px |
Tooltip
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Unique Size | 150 (5 lines) | 176 px |
Lists
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Small Overflow (without icon) | 61 | 188 px |
| Small Overflow (with icon) | 53 | 164 px |
| Regular Overflow (without icon) | 62 | 220 px |
| Regular Overflow (with icon) | 53 | 192 px |
| Large Overflow (without icon) | 62 | 252 px |
| Large Overflow (with icon) | 54 | 220 px |
| Small Select (without icon) | 88 | 264 px |
| Small Select (with icon) | 79 | 240 px |
| Regular Select (without icon) | 75 | 264 px |
| Regular Select (with icon) | 66 | 236 px |
| Large Select (without icon) | 65 | 264 px |
| Large Select (with icon) | 57 | 232 px |
Empty State
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Title | 45 | 188 px |
| Description | 144 (3 lines) | 188 px |
Titles
| Variation | Maximum number of characters | Maximum component width (if applicable) |
|---|---|---|
| Side Bar, Page Title and Modal | 26 | N.A |
| Flyout | 44 | 182 px (small) |