> For the complete documentation index, see [llms.txt](https://ds5.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds5.gitbook.io/documentation/components/labels.md).

# Label

{% hint style="info" icon="figma" %}
Nom du composant : **labelMain**
{% endhint %}

***

{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=54-2668&page-id=54:2667&scaling=scale-down-width&starting-point-node-id=54:2668&t=7Fzow5zL3WwTkpJI-1&viewport=427,172,1.27>" %}

***

### Principes

#### Une couleur, une signification

Chaque type de Label à sa signification. Utiliser toujours la même couleur pour la même thématique permet de clarifier et simplifier l'expérience du client. Se référer à la page [couleurs](/documentation/foundations/colors.md) pour en savoir plus.

#### Concis

Le contenu doit être extrêmement court (généralement un ou deux mots) pour rester lisible d'un coup d'œil et ne pas surcharger l'élément auquel il est rattaché.

#### Non-Actionnable

Contrairement à un bouton ou à un filtre (Chip), le Label est purement informatif. Il ne doit pas induire l'utilisateur en erreur en imitant un élément cliquable.

***

### Dos & Don'ts

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th></tr></thead><tbody><tr><td><mark style="color:green;">À faire</mark></td><td>Utiliser un label pour notifier une mini info, un statut de façon concise.</td></tr><tr><td><mark style="color:red;">À ne pas faire</mark></td><td>Utiliser un label pour une phrase.</td></tr><tr><td><mark style="color:green;">À faire</mark></td><td>Utiliser un label avec la couleur sémentique associée au thème de l'information conviée</td></tr><tr><td><mark style="color:red;">À ne pas faire</mark></td><td>Ne pas suivre les thèmes de couleurs</td></tr></tbody></table>

***

### Composant lié

{% content-ref url="/pages/jI5kbASOQsijpF9VRZcE" %}
[Caption](/documentation/components/caption.md)
{% endcontent-ref %}

{% content-ref url="/pages/YSC4rPiBAuuYKmDTYDfP" %}
[Chip](/documentation/components/chip.md)
{% endcontent-ref %}

{% content-ref url="/pages/X5jVI1da8wv0fY4tcExg" %}
[Bouton](/documentation/components/button.md)
{% endcontent-ref %}

{% content-ref url="/pages/eUzMKjPBbyqnKY2fQhjs" %}
[Product Box](/documentation/components/product-box.md)
{% endcontent-ref %}