DSFR v1.12.1
Le bouton est un élément d’interaction avec l’interface permettant à l’utilisateur d’effectuer une action.
Documentation<button id="button-1509" class="fr-btn">Libellé bouton</button>
<button id="button-1512" class="fr-btn fr-btn--sm">Libellé bouton SM</button>
<button id="button-1515" class="fr-btn fr-btn--lg">Libellé bouton LG</button>
<button id="button-1518" disabled class="fr-btn">Libellé bouton</button>
<button id="button-1521" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">Libellé bouton</button>
<button id="button-1524" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right">Libellé bouton</button>
<button id="button-1527" title="[À MODIFIER - Libellé bouton]" 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]" id="button-1530" class="fr-btn">Libellé bouton</a>
<button id="button-1536" class="fr-btn fr-btn--secondary">Libellé bouton</button>
<button id="button-1539" disabled class="fr-btn fr-btn--secondary">Libellé bouton</button>
<button id="button-1542" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">Libellé bouton</button>
<button id="button-1545" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right fr-btn--secondary">Libellé bouton</button>
<button id="button-1548" title="[À MODIFIER - Libellé bouton]" 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]" id="button-1551" class="fr-btn fr-btn--secondary">Libellé bouton</a>
<button id="button-1554" class="fr-btn fr-btn--tertiary">Libellé bouton</button>
<button id="button-1557" disabled class="fr-btn fr-btn--tertiary">Libellé bouton</button>
<button id="button-1560" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--tertiary">Libellé bouton</button>
<button id="button-1563" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right fr-btn--tertiary">Libellé bouton</button>
<button id="button-1566" title="[À MODIFIER - Libellé bouton]" 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]" id="button-1569" class="fr-btn fr-btn--tertiary">Libellé bouton</a>
<button id="button-1572" class="fr-btn fr-btn--tertiary-no-outline">Libellé bouton</button>
<button id="button-1575" disabled class="fr-btn fr-btn--tertiary-no-outline">Libellé bouton</button>
<button id="button-1578" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--tertiary-no-outline">Libellé bouton</button>
<button id="button-1581" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right fr-btn--tertiary-no-outline">Libellé bouton</button>
<button id="button-1584" title="[À MODIFIER - Libellé bouton]" 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]" id="button-1587" class="fr-btn fr-btn--tertiary-no-outline">Libellé bouton</a>
<ul class="fr-btns-group">
<li>
<button id="button-1589" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
<li>
<button id="button-1590" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
<li>
<button id="button-1591" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--sm">
<li>
<button id="button-1593" class="fr-btn fr-btn--secondary">Libellé bouton SM</button>
</li>
<li>
<button id="button-1594" class="fr-btn fr-btn--secondary">Libellé bouton SM</button>
</li>
<li>
<button id="button-1595" class="fr-btn fr-btn--secondary">Libellé bouton SM</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--lg">
<li>
<button id="button-1597" class="fr-btn fr-btn--secondary">Libellé bouton LG</button>
</li>
<li>
<button id="button-1598" class="fr-btn fr-btn--secondary">Libellé bouton LG</button>
</li>
<li>
<button id="button-1599" class="fr-btn fr-btn--secondary">Libellé bouton LG</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--icon-left">
<li>
<button id="button-1601" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">Libellé bouton</button>
</li>
<li>
<button id="button-1602" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">Libellé bouton</button>
</li>
<li>
<button id="button-1603" 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 id="button-1605" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button id="button-1606" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--inline">
<li>
<button id="button-1608" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
<li>
<button id="button-1609" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--inline-sm">
<li>
<button id="button-1611" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button id="button-1612" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--inline-md">
<li>
<button id="button-1614" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button id="button-1615" class="fr-btn fr-btn--secondary">Libellé bouton</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--inline-lg">
<li>
<button id="button-1617" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button id="button-1618" 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 id="button-1620" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button id="button-1621" 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 id="button-1623" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button id="button-1624" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
</li>
<li>
<button id="button-1625" 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 id="button-1627" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button id="button-1628" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
</li>
<li>
<button id="button-1629" 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 id="button-1631" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button id="button-1632" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
</li>
<li>
<button id="button-1633" class="fr-btn fr-btn--secondary">Libellé bouton plus long</button>
</li>
</ul>
<ul class="fr-btns-group fr-btns-group--equisized">
<li>
<button id="button-1635" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button id="button-1636" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
</li>
<li>
<button id="button-1637" 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 id="button-1639" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button id="button-1640" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
</li>
<li>
<button id="button-1641" 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 id="button-1643" class="fr-btn">Libellé bouton</button>
</li>
<li>
<button id="button-1644" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
</li>
<li>
<button id="button-1645" class="fr-btn fr-btn--secondary">Libellé bouton plus long</button>
</li>
</ul>
<ul class="fr-btns-group">
<li>
<button id="button-1647" title="[À MODIFIER - Libellé bouton]" class="fr-btn fr-icon-checkbox-circle-line">Libellé bouton</button>
</li>
<li>
<button id="button-1648" title="[À MODIFIER - Libellé bouton]" class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary">Libellé bouton</button>
</li>
<li>
<button id="button-1649" title="[À MODIFIER - Libellé bouton]" 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 id="button-1651" title="[À MODIFIER - Libellé bouton]" class="fr-btn fr-icon-checkbox-circle-line">Libellé bouton</button>
</li>
<li>
<button id="button-1652" title="[À MODIFIER - Libellé bouton]" class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary">Libellé bouton</button>
</li>
<li>
<button id="button-1653" title="[À MODIFIER - Libellé bouton]" class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary">Libellé bouton</button>
</li>
</ul>