DSFR v1.14.0
Le bouton est un élément d’interaction avec l’interface permettant à l’utilisateur d’effectuer une action.
Documentation<button type="button" class="fr-btn">Libellé bouton</button>
<button type="button" class="fr-btn fr-btn--sm">Libellé bouton SM</button>
<button type="button" class="fr-btn fr-btn--lg">Libellé bouton LG</button>
<button type="button" disabled class="fr-btn">Libellé bouton</button>
<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">Libellé bouton</button>
<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right">Libellé bouton</button>
<button title="[À MODIFIER - Libellé bouton]" type="button" class="fr-btn fr-icon-checkbox-circle-line">Libellé bouton</button>
L’exemple ci-dessous montre la possibilité d'appliquer le style du bouton secondaire sur un élément de type "lien" <a>. A n'appliquer qu'en cas exceptionnel d'impossibilité technique d'utiliser un <button>.
<a href="[url - à modifier]" class="fr-btn">Libellé bouton</a>
<button type="button" class="fr-btn fr-btn--secondary">Libellé bouton</button>
<button type="button" disabled class="fr-btn fr-btn--secondary">Libellé bouton</button>
<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">Libellé bouton</button>
<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right fr-btn--secondary">Libellé bouton</button>
<button title="[À MODIFIER - Libellé bouton]" type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary">Libellé bouton</button>
L’exemple ci-dessous montre la possibilité d'appliquer le style du bouton secondaire sur un élément de type "lien" <a>. A n'appliquer qu'en cas exceptionnel d'impossibilité technique d'utiliser un <button>.
<a href="[url - à modifier]" class="fr-btn fr-btn--secondary">Libellé bouton</a>
<button type="button" class="fr-btn fr-btn--tertiary">Libellé bouton</button>
<button type="button" disabled class="fr-btn fr-btn--tertiary">Libellé bouton</button>
<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--tertiary">Libellé bouton</button>
<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right fr-btn--tertiary">Libellé bouton</button>
<button title="[À MODIFIER - Libellé bouton]" type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--tertiary">Libellé bouton</button>
L’exemple ci-dessous montre la possibilité d'appliquer le style du bouton secondaire sur un élément de type "lien" <a>. A n'appliquer qu'en cas exceptionnel d'impossibilité technique d'utiliser un <button>.
<a href="[url - à modifier]" class="fr-btn fr-btn--tertiary">Libellé bouton</a>
<button type="button" class="fr-btn fr-btn--tertiary-no-outline">Libellé bouton</button>
<button type="button" disabled class="fr-btn fr-btn--tertiary-no-outline">Libellé bouton</button>
<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--tertiary-no-outline">Libellé bouton</button>
<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right fr-btn--tertiary-no-outline">Libellé bouton</button>
<button title="[À MODIFIER - Libellé bouton]" type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--tertiary-no-outline">Libellé bouton</button>
L’exemple ci-dessous montre la possibilité d'appliquer le style du bouton secondaire sur un élément de type "lien" <a>. A n'appliquer qu'en cas exceptionnel d'impossibilité technique d'utiliser un <button>.
<a href="[url - à modifier]" class="fr-btn fr-btn--tertiary-no-outline">Libellé bouton</a>
<ul class="fr-btns-group">
<li>
<button type="button" id="button-999" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1000" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1001" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--sm">
<li>
<button type="button" id="button-1003" class="fr-btn fr-btn--secondary">Libellé bouton SM</button>
</li>
<li>
<button type="button" id="button-1004" class="fr-btn fr-btn--secondary">Libellé bouton SM</button>
</li>
<li>
<button type="button" id="button-1005" class="fr-btn fr-btn--secondary">Libellé bouton SM</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--lg">
<li>
<button type="button" id="button-1007" class="fr-btn fr-btn--secondary">Libellé bouton LG</button>
</li>
<li>
<button type="button" id="button-1008" class="fr-btn fr-btn--secondary">Libellé bouton LG</button>
</li>
<li>
<button type="button" id="button-1009" class="fr-btn fr-btn--secondary">Libellé bouton LG</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--icon-left">
<li>
<button type="button" id="button-1011" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1012" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1013" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">Libellé bouton</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--inline">
<li>
<button type="button" id="button-1015" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1016" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--inline">
<li>
<button type="button" id="button-1018" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1019" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--inline-sm">
<li>
<button type="button" id="button-1021" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1022" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--inline-md">
<li>
<button type="button" id="button-1024" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1025" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--inline-lg">
<li>
<button type="button" id="button-1027" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1028" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm">
<li>
<button type="button" id="button-1030" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1031" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--equisized fr-btns-group--inline">
<li>
<button type="button" id="button-1033" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1034" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
</li>
<li>
<button type="button" id="button-1035" class="fr-btn fr-btn--secondary">Libellé bouton plus long</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--right fr-btns-group--equisized fr-btns-group--inline">
<li>
<button type="button" id="button-1037" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1038" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
</li>
<li>
<button type="button" id="button-1039" class="fr-btn fr-btn--secondary">Libellé bouton plus long</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--center fr-btns-group--equisized fr-btns-group--inline">
<li>
<button type="button" id="button-1041" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1042" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
</li>
<li>
<button type="button" id="button-1043" class="fr-btn fr-btn--secondary">Libellé bouton plus long</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--equisized">
<li>
<button type="button" id="button-1045" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1046" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
</li>
<li>
<button type="button" id="button-1047" class="fr-btn fr-btn--secondary">Libellé bouton plus long</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--right fr-btns-group--equisized">
<li>
<button type="button" id="button-1049" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1050" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
</li>
<li>
<button type="button" id="button-1051" class="fr-btn fr-btn--secondary">Libellé bouton plus long</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--center fr-btns-group--equisized">
<li>
<button type="button" id="button-1053" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button type="button" id="button-1054" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
</li>
<li>
<button type="button" id="button-1055" class="fr-btn fr-btn--secondary">Libellé bouton plus long</button>
</li>
</ul>
<ul class="fr-btns-group">
<li>
<button title="[À MODIFIER - Libellé bouton]" type="button" id="button-1057" class="fr-btn fr-icon-checkbox-circle-line">Libellé bouton</button>
</li>
<li>
<button title="[À MODIFIER - Libellé bouton]" type="button" id="button-1058" class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary">Libellé bouton</button>
</li>
<li>
<button title="[À MODIFIER - Libellé bouton]" type="button" id="button-1059" class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary">Libellé bouton</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--inline">
<li>
<button title="[À MODIFIER - Libellé bouton]" type="button" id="button-1061" class="fr-btn fr-icon-checkbox-circle-line">Libellé bouton</button>
</li>
<li>
<button title="[À MODIFIER - Libellé bouton]" type="button" id="button-1062" class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary">Libellé bouton</button>
</li>
<li>
<button title="[À MODIFIER - Libellé bouton]" type="button" id="button-1063" class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary">Libellé bouton</button>
</li>
</ul>