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

# Bouton tactile

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

***

{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=1-833&page-id=1:832&scaling=min-zoom&starting-point-node-id=1:833&t=fadup6s1760ZyVWK-1>" %}

***

### Principes

#### Navigation

Les boutons tactiles ont pour but de fluidifier la navigation de l'utilisateur parmi les offres. Ils facilitent la recherche dans les catalogues et représentent visuellement des types de produits, des catégories, des sous-catégories.

***

### 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>Titre à 3 lignes maximales.</td></tr><tr><td><mark style="color:red;">À ne pas faire</mark></td><td>Titre à 4 lignes.</td></tr><tr><td><mark style="color:green;">À faire</mark></td><td>2 ambiances maximums.</td></tr><tr><td><mark style="color:red;">À ne pas faire</mark></td><td>3 ambiances et plus.</td></tr></tbody></table>

***

### Composant lié

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

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