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

# Bouton header

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

***

{% embed url="<https://www.figma.com/proto/wBkSm4I4jUASOuNVQr9xA9/DSVUV5---Previews?content-scaling=fixed&hotspot-hints=0&node-id=1-647&page-id=1:646&scaling=min-zoom&starting-point-node-id=1:647&t=VRPvsRoKSbOssMh5-1&viewport=127,118,0.76>" %}

***

### Principes

#### Plus qu'un simple bouton

Il inclut des moyens de communiquer des informations supplémentaires par rapport au bouton classique grâce à toute une panoplie de Badges et de Notifications.

***

### Usage

Il est utilisé dans le header du site uniquement. Permet de transmettre des statuts et de naviguer rapidement à travers le site.

***

### À faire, ne pas faire

<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 dans le header.</td></tr><tr><td><mark style="color:red;">À ne pas faire</mark></td><td>L'utiliser comme un bouton normal, ou ailleurs que dans le header.</td></tr></tbody></table>

***

### Composants liés

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

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