> 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/colors.md).

# Label couleur

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

***

{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=54-3243&page-id=54:3242&scaling=min-zoom&starting-point-node-id=54:3243&t=qGhAYMsiMIbisbqs-1&viewport=259,181,0.84>" %}

***

### Principes

#### Fidélité visuelle

La pastille doit reproduire fidèlement la teinte la plus proche du produit pour garantir une navigation sans erreur.

#### Synthèse visuelle

L'affichage direct est limité à 4 pastilles. Au-delà, un indicateur textuel (ex: +2) signale les autres variantes pour ne pas encombrer la Product Box.

#### Hiérarchie

Sa taille doit rester discrète pour ne pas prendre le pas sur les informations prioritaires (nom, prix), tout en étant suffisamment large pour être actionnable au doigt sur mobile.

***

### Usage

Le label est utilisé dans la Product Box pour montrer l'étendu des couleurs disponibles pour le produit. Il est clicable, un clic sur une des couleurs du label renvoie directement à la fiche produit du produit concerné.

***

### Composant lié

{% content-ref url="/pages/X3lpdDgKjvyvHqdERzpe" %}
[Label](/documentation/components/labels.md)
{% endcontent-ref %}

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

{% content-ref url="/pages/G2Oc2aPUhmfhylsr8RqL" %}
[Toggle couleur](/documentation/components/color.md)
{% endcontent-ref %}