---
# System prepended metadata

title: Buttons

---

# Harmonisation buttons

## Figma

Organisation des pages Figma :
- /Buttons
    - Button
    - ToggleButton
    - IconButton
    - LabeledIconButton
    - ButtonGroup
    - FilterButton
- /SideNav
    - SideNav Button
- /ToolBar
    - Toolbar Button

## Components

### Atoms (`Buttons/`)

- ✅ Button ✅
    - Classique
    - variants : primary, secondary, ghost et les buttons sans labels + size
    - ![image](https://hackmd.io/_uploads/rJa0GGkLp.png) ![image](https://hackmd.io/_uploads/rJ6D4GJ8T.png) ![image](https://hackmd.io/_uploads/SJKdEGkUa.png)

- ✅ ToggleButton ✅
    - Plusieurs boutons collés (fonctionnellement un switch)
    - ![image](https://hackmd.io/_uploads/rkv3Mz1La.png)
    
- 🔥 IconButton ✅
    - props : 
        - variant : filled, primary (pas de fond), secondary (pas de fond)
        - size : xs, s, m, l, xl
        - shape : circle, rounded, none
    - ![image](https://hackmd.io/_uploads/B1ixVf1LT.png)
    - On intègre aussi le variant round : ![image](https://hackmd.io/_uploads/S1AtHz1LT.png) ?

- 🟠 Popover Buttons ✅
    - à renommer ?labeledIconButton? (à confirmer)
    - ![image](https://hackmd.io/_uploads/B1qSVzJUp.png)
    - @ Il faudra rajouter un props size

- 🟠 ButtonGroup : pas encore fait ✅
    - JIRA : https://jira-ext.cls.fr/browse/IHM-1024
    - ![image](https://hackmd.io/_uploads/HJJYfMJL6.png)
    - @ Mettre à jour les maquettes sur Components
    
### Specifique

- 🟠 FilterButton (retrouver le nom dans le code
    - ![image](https://hackmd.io/_uploads/rk8yHz1UT.png)
    - @ Mettre dans le dossier buttons 

### Specifique dans des composants)

- 💀 Carousel / Retour en haut de page (a discuter ca pourrait être un icone button avec un variant round)
    - ![image](https://hackmd.io/_uploads/rkO5Sfk8T.png)
    - A voir si on l'intègre dans icons Buttons
    - Géré par l'iconButtons
- ✅ Sidenav Buttons
    - ![image](https://hackmd.io/_uploads/S14IHMJI6.png)
    - Il y a des dropdown aussi ? (sujet dev)
- ✅ Toolbar Buttons (Toolbar)
    - ![image](https://hackmd.io/_uploads/SyMoNMJUp.png)
    - Ajout variant Expendable pour cas particulier comme la légende
    - @ Toolbar -> molécule et faire de toolbar button un spé au composant Toolbar

### Notes tech

- Basculer tous les buttons dans un dossier Buttons/ (dans atoms)
- Mettre FilterButton dans Buttons/, même s'il n'est utilisé qu'une fois
- Garder Sidenav Buttons dans le composant Sidenav
- Basculer Toolbar dans molécule
- ACTION BUTTON ??? -> Toolbar button