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

# Bouton

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

***

### Variants et types

{% tabs %}
{% tab title="Primaire" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=1-43&page-id=1:3&scaling=min-zoom&starting-point-node-id=1:43&t=LEfjooBTia97ZonG-1&viewport=197,309,0.22>" %}
{% endtab %}

{% tab title="Secondaire" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=1-426&page-id=1:3&scaling=min-zoom&starting-point-node-id=1:426&t=LEfjooBTia97ZonG-1&viewport=197,309,0.22>" %}
{% endtab %}

{% tab title="Tertiaire" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=1-470&page-id=1:3&scaling=min-zoom&starting-point-node-id=1:470&t=LEfjooBTia97ZonG-1&viewport=197,309,0.22>" %}
{% endtab %}

{% tab title="Sur image" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=1-514&page-id=1:3&scaling=min-zoom&starting-point-node-id=1:514&t=LEfjooBTia97ZonG-1&viewport=197,309,0.22>" %}
{% endtab %}

{% tab title="Fantôme" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=1-602&page-id=1:3&scaling=min-zoom&starting-point-node-id=1:602&t=LEfjooBTia97ZonG-1&viewport=197,309,0.22>" %}
{% endtab %}

{% tab title="Texte" %}
{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=1-558&page-id=1:3&scaling=min-zoom&starting-point-node-id=1:558&t=LEfjooBTia97ZonG-1&viewport=197,309,0.22>" %}
{% endtab %}
{% endtabs %}

***

### Principes

#### Prédictible

Le label doit lever toute approximation. L'utilisateur doit comprendre instantanément le résultat de son action avant même de cliquer. Privilégier les verbes d'actions à l'infinitif ou la conjugaison à la première personne du singulier.

#### Hiérarchisé

Le bouton ne vit pas seul, il doit refléter son importance dans l'écran. Il guide l'utilisateur vers les différentes actions attendues dans un contexte.

#### Concis

Le label des boutons permet à l'utilisateur de se projeter dans l'action, en le réduisant à un mot ou une courte expression.

***

### Usages

Les boutons permettent à l'utilisateur de valider des choix, d'exécuter des actions et de naviguer sur le site. Leur rôle principal est l'action.

***

### À faire, ne pas faire

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><mark style="color:green;">À faire</mark></td><td>Un seul primary par contexte.</td><td><a href="/files/Jwlyn0Jg6n0JOQhRfADP">/files/Jwlyn0Jg6n0JOQhRfADP</a></td></tr><tr><td><mark style="color:red;">À ne pas faire</mark></td><td>Plusieurs primary pour un contexte.</td><td><a href="/files/Y9STGzfxM083LJaqhQya">/files/Y9STGzfxM083LJaqhQya</a></td></tr><tr><td><mark style="color:green;">À faire</mark></td><td>Utiliser un Bouton Sur Image sur une image ou du contenu.</td><td><a href="/files/aUx3HmzChGh9mmRx6cvx">/files/aUx3HmzChGh9mmRx6cvx</a></td></tr><tr><td><mark style="color:red;">À ne pas faire</mark></td><td>Utiliser un Bouton Sur Image sur une surface vide qui n'est pas une image, sans aucun contenu derrière.</td><td><a href="/files/cP44prrKxWk44tTX0bDT">/files/cP44prrKxWk44tTX0bDT</a></td></tr></tbody></table>

***

### Composant liés

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

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

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