Composant Bouton
Ce composant permet de créer un bouton DSFR et des groupes de boutons DSFR.
Le système de bouton se compose de deux blocs :
button: un bouton individuel, utilisable seulbuttons: un conteneur de groupe de boutons, dans lequel les boutons sont placés
Bouton simple
Composant
En savoir plusExtrait de code
/// button | En savoir plus
target: https://www.systeme-de-design.gouv.fr/
///
Groupe de boutons
Avertissement
Les boutons dans un groupe doivent être encapsulés dans un bloc buttons. Un button placé hors d'un groupe est rendu comme un bouton autonome.
Groupe vertical (défaut)
Composant
Extrait de code
/// buttons
/// button | Bouton primaire
target: "#"
///
/// button | Bouton secondaire
target: "#"
kind: secondary
///
/// button | Bouton tertiaire
target: "#"
kind: tertiary
///
///
Options du bouton button
| Option | Valeur par défaut | Description |
|---|---|---|
| kind | Variante de style du bouton. Valeurs possibles : secondary, tertiary, tertiary-no-outline. Si non spécifié, le style primaire est utilisé | |
| size | Taille du bouton. Valeurs possibles : sm, md, lg. Si non spécifié, la taille par défaut (md) est utilisée | |
| disabled | false | Si true, le bouton est désactivé |
| icon | Icône Remix Icon à afficher dans le bouton (ex: arrow-right-line). Le préfixe fr-icon- est ajouté automatiquement |
|
| icon_place | left | Position de l'icône. Valeurs possibles : left, right, icon-only. Avec icon-only, le libellé est masqué et seule l'icône est affichée |
| target | URL de destination du bouton (attribut href). Si non spécifié, la valeur par défaut est # |
|
| target_new | false | Si true, le lien s'ouvre dans un nouvel onglet |
Options du groupe buttons
| Option | Valeur par défaut | Description |
|---|---|---|
| size | Taille des boutons du groupe. Valeurs possibles : sm, md, lg. Si non spécifié, la taille par défaut (md) est utilisée | |
| inline | vertical | Variante d'affichage du groupe. Valeurs possibles : vertical, inline, inline-sm, inline-md, inline-lg |
| equisized | false | Si true, les boutons ont tous la même largeur |
| align | Alignement horizontal du groupe. Valeurs possibles : left, center, right |
Remarque sur les tailles
La taille md est la taille par défaut pour les boutons et les groupes. Spécifier size: md est optionnel. Seules les tailles sm et lg produisent un changement visible.
Variantes de style
Composant
PrimaireSecondaireTertiaireTertiaire sans contourExtrait de code
/// button | Primaire
target: "#"
///
/// button | Secondaire
target: "#"
kind: secondary
///
/// button | Tertiaire
target: "#"
kind: tertiary
///
/// button | Tertiaire sans contour
target: "#"
kind: tertiary-no-outline
///
Tailles
Composant
PetitMoyen (défaut)GrandExtrait de code
/// button | Petit
target: "#"
size: sm
///
/// button | Moyen (défaut)
target: "#"
///
/// button | Grand
target: "#"
size: lg
///
Bouton avec icône
Composant
TéléchargerSuivantRechercherExtrait de code
/// button | Télécharger
target: "#"
icon: download-line
icon_place: left
///
/// button | Suivant
target: "#"
icon: arrow-right-line
icon_place: right
///
/// button | Rechercher
target: "#"
icon: search-line
icon_place: icon-only
///
Lien externe (nouvel onglet)
Information
Pour les liens externes, le DSFR ajoute automatiquement l'icône fr-icon-external-link-line et la mention « Nouvelle fenêtre » dans le title du lien.
Composant
Documentation DSFRExtrait de code
/// button | Documentation DSFR
target: https://www.systeme-de-design.gouv.fr/
target_new: true
///
Groupe en ligne
Composant
Extrait de code
/// buttons
inline: inline
/// button | Primaire
target: "#"
///
/// button | Secondaire
target: "#"
kind: secondary
///
/// button | Tertiaire
target: "#"
kind: tertiary
///
///
Groupe avec alignement
Composant
Extrait de code
/// buttons
inline: inline
align: center
/// button | Gauche
target: "#"
kind: secondary
///
/// button | Centre
target: "#"
kind: secondary
///
///
Groupe avec boutons de même largeur
Composant
Extrait de code
/// buttons
inline: inline
equisized: true
/// button | Action 1
target: "#"
///
/// button | Action 2
target: "#"
kind: secondary
///
/// button | Action 3
target: "#"
kind: tertiary
///
///
Groupe avec taille
Composant
Extrait de code
/// buttons
size: sm
inline: inline
/// button | Petit 1
target: "#"
///
/// button | Petit 2
target: "#"
kind: secondary
///
///
Dernière modification le 4 juin 2026