L’accordéon permet d'afficher de grandes quantités de contenu dans un espace réduit grâce à la divulgation progressive.

Accordion

children

## Contexte

Une alerte se compose d’une icône, d’un titre et d’une description. Sa couleur et son icône sont associées à la nature du message. Dans tous les cas, son rôle est d’attirer l’attention de l’utilisateur sur une information ou la conséquence d’une action en cours, sans compromettre la suite du parcours.

Il existe 4 types d’alerte :

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/0df0e205-57e4-46c8-80bd-6f9b3d9ed97d)


## Construction

Une alerte contient le plus souvent un texte principal (titre) en Body 1 Bold et un texte secondaire (description) en Body 2. On peut mettre certaines informations essentielles du texte secondaire en Body 2 Bold.

**Texte principal (Titre)**

- **Formulation avec description** : on ponctue chaque titre avec une majuscule sur le premier mot et sans point final (sauf !, ?, ...).

- **Message** : on fait tout de suite comprendre à l’utilisateur l’information ou la conséquence de son action en cours.

- **Longueur** : dans l’idéal, on ne dépasse pas 2 lignes en version mobile.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/e10552c2-c04c-4248-b386-251bd47d1e39)

- **Formulation sans description** : lorsque l’information principale est assez concise et explicite, l’alerte peut prendre la forme d’un titre sans description.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/a0ef677c-51ef-4369-9bb0-67de90e8b551)

**Texte secondaire (description)**

- **Formulation standard** : on utilise une phrase verbale, avec une majuscule sur le premier mot et un point final. 

- **Message** : on précise toutes les informations à connaître et on propose la ou les actions à réaliser si besoin.

- **Longueur** : dans l’idéal, on ne dépasse pas 4 lignes en version mobile.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/b7b9f6b0-6d07-4c3b-a8bd-094e30838327)

- **Formulation avec liste à puces** : on peut utiliser une liste à puces pour exprimer plusieurs idées ou une idée complexe. 

- **Message** : on donne une idée claire et précise par point.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/7edecd40-48aa-4397-a17f-dac6981fb1bb)

- **Formulation avec lien** : on peut intégrer un lien dans le texte ou hors du texte pour faciliter la navigation de l’utilisateur.

- **Message** : on précise bien la navigation à venir dans le texte du lien.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/c52c0e92-54ea-48ec-8858-6620e7b698e0)

## Ton de voix

**Les 4 types d'alerte**

L’état émotionnel de l’utilisateur varie selon la nature de l’alerte : attention, succès, information ou erreur. On se demande donc systématiquement quelles pourraient être ses émotions pour y répondre avec le ton approprié.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/cc9a8236-7c03-4df2-8f01-303f4daddf5b)


## Variables de microcopie

**Formulation des 4 types d'alerte**

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/032abfca-6a0f-4697-b306-0709c0bd921e)

Les alertes sont utilisées pour afficher des informations concernant un impact sur l'expérience utilisateur et les utilisations du produit.


Alert

className

toasterChildren

iconName

title

description

deletable

closable

position

float

duration

offset

display

onShow

onHide

toaster

banner

L'élément Autocomplete est un champ de saisie qui offre des suggestions automatiques à mesure que l'utilisateur tape du texte. Il permet une saisie plus rapide et plus précise en proposant des choix pertinents basés sur les lettres déjà entrées. Il peut être utilisé dans divers contextes où l'utilisateur doit sélectionner une valeur parmi une liste préexistante, comme dans les formulaires de recherche, les sélections de tags, ou les champs de saisie d'adresses.

AutoComplete

defaultValue

value

data

classNameMenu

absoluteMenu

fullwidthMenu

matching

onChange

onItemSelected

displayMenu

onIconClick

getSuggestions

debounceSuggestionsTimeout

onFocus

onBlur

label

index

Les badges sont des étiquettes permettant de communiquer efficacement une information simple et contextuelle (le plus souvent, un compte numérique) sur le composant auquel le badge est rattaché.


Badge

status

variant

Une box est un conteneur permettant de mettre en relief des éléments dans une page.


skeleton

href

highlighted

shadowless

backgroundSrc

headerOffset

flat

active

inverted

Le breadcrumb ou fil d’ariane est un élément de navigation utilisé pour indiquer l'emplacement actuel de l'utilisateur et l'aider à naviguer.


Breadcrumb

## Contexte

Un bouton est utilisé pour déclencher une action. Pour cela, il doit être clair, prédictible et inciter l’utilisateur à cette action. Un bouton doit donc toujours prendre en compte le contexte et préciser l’action à venir. 

## Construction

##### Formulation : <Verbe à l’infinitif + Objet de l’action> en Body 1 Bold 

- Un bouton prend la forme <Verbe à l’infinitif> + <Objet de l’action>, car il doit clairement indiquer l’action à venir, tout en incitant l’utilisateur à cliquer.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/6b097112-ff7a-46d5-afee-ed917be5a747)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/04eb9d6b-fe3a-4c31-8cdf-327f1f1ae971)

- Un bouton prendre la forme {Mot} + {Verbe à l’infinitif} dans le cas où celui-ci ne peut pas commencer par {Verbe à l’infinitif}.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/63d657d8-4fda-4e70-9088-347b78b1fc97)

- Un bouton peut prendre la forme {Verbe à l’infinitif sans complément} uniquement si l’action est assez courante et explicite.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/2dd4edd1-dce4-43d6-bea0-25d5f97694aa)

- Un bouton peut contenir une valeur dynamique dans un contexte de filtrage des items.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/62a461f2-b303-4edf-8c16-9c7212ac5287)

##### Longueur : 25 caractères maximum

- Un bouton doit être le plus court possible et se limiter à une seule action. Chaque mot doit avoir un but précis, on supprime donc tous les mots inutiles. Dans l’idéal, on ne dépasse pas les 25 caractères, espaces compris.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/30e32bc2-d7d1-4558-8f45-b67fc3642dc0)


##### Cohérence : le même mot pour décrire la même action

- Un bouton doit reprendre les mêmes termes et notions de l’interface pour décrire l’action de l’utilisateur.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/0a9f5323-cea6-461c-9189-daeb5cc4c72a)

##### Majuscule, minuscule et ponctuation

- Un bouton commence toujours par une lettre en majuscule, le reste est en minuscule.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/439f8e51-ab39-422c-9e40-1d388dc50033)

- Les noms de produit ou de marque d’un bouton suivent les règles du propriétaire. Rendez-vous sur leurs sites pour connaître leur orthographe.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/3dce61d1-16bf-4540-81c1-ed8bf0981ecd)

- Un bouton ne prend jamais de signe de ponctuation.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/26d96f05-3e90-429c-84f4-8e073a9029ca)


##### Conversation

- On privilégie {mon/ma/mes} lorsqu’on parle d’une offre ou d’un équipement que l’utilisateur possède déjà ou qu’on décrit une action qui lui est propre. 

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/121401d1-78e0-4de1-a629-49f92881dfa8)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/fb593fc1-8dec-4d55-b5d3-44c0fb634864)

- On privilégie {ce/cette/ces} lorsque l’utilisateur répond à un choix proposé par Bouygues Telecom. 

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/f3554b85-0930-475d-9ebc-6cedbdc2c7c1)


## Ton de voix

##### Les différents types de bouton

En principe, l’état émotionnel de l’utilisateur varie selon la nature du bouton et donc le contexte au moment du contact. On se demande donc systématiquement quelles pourraient être ses émotions pour y répondre avec le ton approprié.


![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/9488604e-8004-4cdc-932a-8b022f7ca9ba)


## Actions récurrentes

##### Les boutons de conversion

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/85ec3baf-45e3-47f8-802a-87cab4d258f0)

##### Les boutons primaires

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/0ef2bc8c-9cff-4ae9-a1be-ec1955428335)

##### Les boutons secondaires

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/47081461-9136-47e8-97de-db55c917e803)

##### Les boutons "minimal"

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/b669982b-5be6-4d01-8eee-abf6c9f3985f)


## Variables de microcopie

##### Formulation standard

![![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/a2f739af-ef2f-4481-911c-3dc0a277d907)](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/daf76f63-4809-4a86-b411-38f9ad015183)

##### Formulations contextualisées

- Choix offre
- Choix option
- Choix produit
- Eligibilité
- En savoir plus
- Paiement
- RDV
- Retour
- Suivant

Les boutons sont utilisés pour **communiquer les actions** que les utilisateurs peuvent effectuer. Les boutons doivent indiquer qu'ils peuvent déclencher une action, être faciles à trouver parmi d'autres éléments, y compris d'autres boutons. L'action et l'état d'un bouton doivent être clairs. Le label décrit l'action qui se produira si un utilisateur interagit avec elle.

Button

disabled

markup

loading

name

routerLink

type

Une card contient du contenu (image et texte) et des actions sur un seul sujet.


Card

horizontal

floating

onClick

reversed

## Contexte

Une checkbox est utilisée pour sélectionner des éléments (0, 1 ou plusieurs) d’une liste spécifique, en cochant ou décochant la ou les cases souhaitées. Les textes doivent être assez explicites pour éviter toute confusion entre ces éléments. Une checkbox peut également se présenter avec un élément unique, obligatoire ou non, pour accepter des conditions par exemple. Pour toute autre sélection unique, on utilise [les radio buttons](https://design.bouyguestelecom.fr/components/Radio?activeTab=content).

## Construction

##### Checkbox à éléments multiples

Une Checkbox à éléments multiples peut être introduite par un texte principal (titre) et précisée par un texte secondaire (description). Dans ce cas, le texte principal est en bold et le texte secondaire est en regular.

**Texte principal (Titre)**

- **Formulation** : on utilise les mêmes formulations tout au long de la liste, avec une majuscule sur le premier mot et sans point final.

- **Message** : on donne une seule idée claire, concise et explicite par élément.

- **Longueur** : dans l’idéal, on ne dépasse 1 ligne en version mobile.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/8abc2b1d-c3fb-445f-8b31-b492d30ac27f)


**Texte secondaire (description)**

- **Formulation** : on utilise les mêmes formulations tout au long de la liste, avec une majuscule sur le premier mot et un point final sur les phrases verbales. 

- **Message** : on donne une seule idée claire, concise et explicite par élément. Ce texte doit apporter un message complémentaire au titre (description, proposition, solution...), donc on évite les redondances.

- **Longueur** : dans l’idéal, on ne dépasse 2 lignes en version mobile.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/aced3a19-94f3-428a-80e2-521462ec84f5)


##### Checkbox à élément unique

**Checkbox à élément unique et non obligatoire**

- **Formulation** : on ponctue avec une majuscule sur le premier mot et sans point final.

- **Message** : on donne une seule idée claire, concise et explicite par élément.

- **Longueur** : dans l’idéal, on ne dépasse 1 ligne en version mobile.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/ce9c7d0d-d412-4385-b9a0-350148e8b78f)

**Checkbox à élément unique et obligatoire**

- **Formulation** : on ponctue avec une majuscule sur le premier mot et avec un point final sur les phrases verbales.

- **Message** : on privilégie une seule idée claire, concise et explicite par élément, mais on peut intégrer plusieurs idées et plusieurs phrases par élément lorsque les contraintes juridiques l’exigent.

- **Longueur** : on fait au plus court en supprimant les mots inutiles.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/7701486f-b8e9-4130-8496-314263b128cc)

La checkbox permet aux utilisateurs de sélectionner un ou plusieurs éléments dans un ensemble.


Checkbox

checkboxValue

checkboxName

checkboxChecked

checkboxId

checked

readonly

Les chips sont des éléments compacts qui représentent une entrée, un attribut ou une action.


Chips

Le composant Columns permet de diviser l'espace horizontal en plusieurs sections verticales, afin de créer une structure harmonieuse et responsive.

Columns

multiline

scrollable

fullBleed

mobile

marginless

fullheight

Le conteneur centre votre contenu horizontalement. C'est l'élément de mise en page le plus basique.

Container

medium

Le compte à rebours est utile pour visualiser la fin d’un évènement.


Countdown

deadline

format

event

small

Les séparateurs sont utilisés pour différencier des zones d'information au sein d'un espace de contenu neutre comme les cartes, les box ou les sections.


Divider

content

unboxed

Le FAB (Floating Action Button) représente l'action la plus importante sur un écran. Il met les actions clés à portée de main.


extended

fixed

bottom

left

right

Bannière de haut de page destiné à attirer l'attention.


Hero

overlap

backgroundHeight

Chaque icône est conçue pour communiquer une intention et faciliter la navigation.  
Pour voir la liste complète, c'est par [ici](/foundations/icons).

Icon

size

circled

stretched

color

backgroundColor

## Contexte

Un input doit indiquer de façon claire et précise les informations à saisir par l’utilisatrice ou utilisateur. Ils peuvent se présenter en une ou plusieurs étapes et doivent respecter des bonnes pratiques d’accessibilité.

## Construction

Les inputs texte sont construits selon les éléments suivants :

- L'étiquette (ou titre de l'input)
- Le helper text : l'exemple, le format ou l'aide à la saisie
- Le message d’erreur


##### L'étiquette (ou titre de l'input)

- **Formulation :** on utilise les mêmes formulations tout au long du formulaire, avec une majuscule sur le premier mot et sans signe de ponctuation (pas de :).
- **Message :** on donne explicitement l’information à saisir, de la manière la plus concise possible (ex. : Votre prénom).
- **Longueur :** dans l’idéal, on ne dépasse pas 1 ligne en version mobile.
- **Champ obligatoire :** on met un astérisque à la fin de l'étiquette si le champ est obligatoire (ex. : Votre prénom *)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/8747014c-f405-4120-80e0-82d11d057425)


##### Le helper text : l'exemple, le format ou l’aide à la saisie

- **Contexte :** lorsque le champs de saisie est contrôlé (adresse e-mail, numéros de téléphone, prise fibre...), on donne un exemple en-dessous de l'étiquette.
- **Formulation :** on mentionne le bon exemple précédé de la mention “Ex. :”, le bon format précédé de la mention “Format :” ou la bonne aide à la saisie.
- **Message :** on privilégie un exemple facile à comprendre ou une aide à la saisie claire qui permettra à l’utilisatrice ou utilisateur de retrouver facilement la bonne information.
- **Longueur :** dans l’idéal, on ne dépasse pas 1 ligne en version mobile pour l’exemple et le format, 2 lignes en version mobile pour l’aide à la saisie.

**L'exemple**

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/3d7f68a5-8fee-4ed3-a970-43773c9a568d)

**Le format**

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/80dafee5-ba52-4400-8b69-b140e6f81b78)

**L'aide à la saisie**

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/033d7220-ec53-4f99-9b5c-0a49a085134a)


##### Le message d'erreur

- **Contexte :** un message d’erreur apparaît automatiquement lorsque l’utilisatrice ou utilisateur valide le formulaire en omettant de renseigner un input obligatoire (non complétion) ou renseigne un format incorrect (erreur de saisie).
- **Formulation :** on utilise une phrase verbale, avec une majuscule sur le premier mot et un point final, en reprenant les termes formulés dans le titre de l’input. Ex. : Votre prénom (titre) / Merci de renseigner votre prénom (message d’erreur).
- **Longueur :** dans l’idéal, on ne dépasse pas 2 lignes en version mobile.

**La non complétion d’un input obligatoire**

- **Message :** on indique explicitement l’information qu’il faut renseigner.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/28787e11-0541-4486-8ac9-b011e7a52fdf)

**L’erreur de saisie**

- **Message :** on indique toujours au préalable la cause de l’erreur et on donne explicitement la solution pour résoudre le problème, avec un ton encourageant, sans culpabiliser l’utilisatrice ou utilisateur. Dans le cas d’une erreur sur le format, on complète le message par un exemple concret.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/196c79ab-5303-43ed-b500-3e1a9c5ac709)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/6a75ed88-601f-4960-a666-3e93bdaf030c)

## Les différents inputs

##### L'input texte

![![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/0b1251b5-712d-4479-86a4-abe7ef6ad2fa)](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/a898c359-4f25-48c1-8128-3d0a6ba576d4)

##### L'input date

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/f3c72ee3-1d44-49dd-a149-ec99735848c0)

##### L'input sélecteur

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/e0a37c80-2f81-494f-adc6-f0a4f593cab8)

##### L'input mot de passe

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/0a4f6ad4-3fb5-4ccf-b27f-24222d8d537c)

##### L'input search bar

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/0e5763a0-f443-4749-a142-4d6b78f8bd7e)

Le composant Input permet de récolter des informations saisies librement par l'utilisateur.


Input

inputName

inputValue

inputSelectionStart

target

inputKeyCode

preventDefault

onKeyUp

onKeyPress

sample

placeholder

iconNameLeft

iconNameRight

onStatusChange

customValidator

patternValidator

help

focused

keyboardStyle

autoCapitalize

autoCorrect

autoCompleteType

textContentType

keyboardType

forceControl

onMouseEnter

onMouseLeave

keyType

onSubmit

minLength

maxLength

securityGauge

validationRules

required

length

number

uppercase

lowercase

specialChars

## Contexte

Un lien est utilisé pour naviguer d'une page à une autre page ou d’une page à un autre contenu au sein de la même page, en cliquant sur du texte souligné dans les deux cas. Il peut être en dehors du texte ou dans le texte. Un lien doit donc toujours être clair, concis et préciser le contenu à venir.

## Construction

##### Lien hors du texte

- **Formulation standard** : on privilégie les phrases verbales, à l’infinitif ou non, sous forme affirmative ou interrogative.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/0e230455-4eb4-4f7b-aa45-63ee36dd1364)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/03eb1c30-3bc5-45d0-a934-853fe11add10)

- **Formulation courte** : certains liens prennent la forme d’un seul mot ou d’un seul verbe à l’infinitif, uniquement si l’action est assez courante et explicite.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/c8a5f15a-8c9c-4eb3-b422-7e957f9e8bbe)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/7b037150-2335-475c-a610-9dcf006966f3)

- **Majuscule, minuscule et ponctuation** : un lien hors du texte commence toujours par une lettre en majuscule, le reste est en minuscule, excepté sur les noms de produit ou de marque qui suivent les règles du propriétaire. Un lien ne prend pas de point final, (sauf ? pour les formes interrogatives).

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/b169cd9e-70a4-4aa4-a3e2-eb37037595a2)

- **Longueur** : un lien doit être le plus court possible et se limiter à une seule action. Chaque mot doit avoir un but précis, on supprime donc tous les mots inutiles. Dans l’idéal, on ne dépasse pas les 60 caractères, espaces compris.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/7ceef9a7-7288-4d49-bdb8-6c7622d45a87)


##### Lien dans le texte

- **Formulation** : on utilise la même forme standard et les mêmes règles de longueur que pour les liens hors du texte. Pour les lettres en majuscule, minuscule et la ponctuation, on suit le fil du texte dans lequel ce lien est intégré.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/d8b7116c-c430-46fd-a9d1-df1ca9f00a3a)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/62617413-4ef8-4309-a493-f0ee8fef0057)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/ce71832d-d28c-45f2-bfe9-261f072ee5f5)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/ce60969d-e804-4a0a-81f9-56e9f420ffad)


## Liens récurrents

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/648a94fd-0eeb-4727-903c-ea73bfdc1f7e)


Un lien permet aux utilisateurs de se déplacer dans les applications et les sites web.


Link

inline

blank

role

Les listes sont des outils de mise en page, allant des listes simples aux listes de descriptions incluant des icones en entête.


List

divider

ordered

## Contexte

Une modale ajoute un niveau d’information dans un contexte précis. Les textes doivent donc être clairs et pertinents pour faciliter une compréhension et une décision rapides. Elle peut contenir un message de suggestion, d’information, d’erreur, de confirmation ou encore d’alerte.

**Titre**

- **Formulation** : on ponctue chaque titre avec une majuscule sur le premier mot et sans point final (sauf !, ?, ...).

- **Message** : on fait tout de suite comprendre à l’utilisateur l’information ou l’action proposée.

- **Longueur** : dans l’idéal, on ne dépasse pas 2 lignes en version mobile.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/3ccc2404-ea7f-4cdc-850e-a62239716732)

**Texte**

- **Formulation** : on utilise une phrase verbale, avec une majuscule sur le premier mot et un point final. 

- **Message** : on précise toutes les informations à connaître pour réaliser l’action ou les actions proposées.

- **Longueur** : dans l’idéal, on ne dépasse pas 4 lignes en version mobile. Certaines modales, notamment d’information, nécessitent des contenus plus longs. Dans ce cas, on va toujours de l’essentiel vers le plus spécifique et on privilégie des listes à puces pour exprimer des idées complexes.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/30afbcf4-8089-4dbb-ad75-06ea438b58e6)


**Bouton**

- **Formulation** : on utilise la forme <Verbe à l’infinitif> + <Objet de l’action>.

- **Message** : on indique clairement l’action ou les actions possibles, tout en incitant l’utilisateur à cliquer sur l’action principale.

- **Action** : on peut intégrer une action principale (bouton primary) ou 2 actions, dont 1 principale (bouton primary) et 1 secondaire (bouton tertiary). Dans le cas d’une modale sans action à réaliser, on conserve un bouton primary avec le label “Fermer”. 

- **Longueur** : dans l’idéal, on ne dépasse pas 25 caractères, espaces compris.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/564d8328-0eff-41ce-9c3d-1f375f184201)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/2cf1ae31-094b-46e9-9374-4d2ccc2baf2a)


**Autres éléments**

Si besoin, on peut intégrer des éléments comme une icône, un visuel, des boutons radio, des mentions légales... Ces éléments doivent être intégrés avec parcimonie, pour ne pas surcharger le contenu de la modale. 

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/d15442fa-badb-4b4f-92a4-fcf515104bf3)

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/2366185f-8f49-4a05-8d1c-f0049633157a)


## Ton de voix

**Les différents types de modale**

L’état émotionnel de l’utilisateur varie selon le type de modale. On se demande donc systématiquement quelles pourraient être ses émotions pour y répondre avec le ton approprié.

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/ccf53230-d300-46ba-ad0a-16fd7fce9181)


## Variables de microcopie

**Formulation standard**

![](https://prod.trilogy-docs-admin.apps.ocp-3.ocp.euw3r53.nbyt.fr/assets/c166583e-932d-4587-9444-6379697be907)

Une modale met en avant un contenu nécessitant une interaction de l'utilisateur avant qu'il ne puisse continuer son parcours. Elle apparait au clic sur un élément déclencheur (généralement un lien ou un bouton)


Modal

trigger

hideCloseButton

onClose

onOpen

panel

onModalHide

unClosable

OTP (One Time Password) est un code numérique à usage unique pour s’identifier ou confirmer une action.

error

onCompleted

activated

autoFocus

Le composant pagination permet à l'utilisateur de naviguer efficacement losque les résultats visualisés sont nombreux et séparés en plusieurs pages.


Pagination

defaultPage

pageSize

Le popover est un complément d’information qui s’affiche au survol d’un élément.


Columns

# Usage