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

# Chip

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

***

{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=1-2861&page-id=1:2860&scaling=min-zoom&starting-point-node-id=1:2861&t=sfMl9kNz0mNe7yYg-1&viewport=178,180,0.49>" %}

***

### Principes

#### Concis

Le label doit être court et explicite pour garantir une lecture rapide et une taille de composant réduite.

#### Modularité

Le chip s'utilise principalement en groupe pour permettre de filtrer ou de catégoriser le contenu. Le chip peut être utilisé tout seul.

***

### Usage

Le chip est un élément de filtrage, il représente visuellement et intéractivement les filtres actifs d'une page ou d'un élément comme un catalogue ou un Panel de filtres.

***

### Composant lié

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

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

{% content-ref url="/pages/i09oXYjIe7ur7DjM66ag" %}
[Toggle filtre](/documentation/components/text.md)
{% endcontent-ref %}

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