Retour

Bouton (button)

Le bouton est un élément d’interaction avec l’interface permettant à l’utilisateur d’effectuer une action.

Documentation

Bouton primaire

Bouton simple

<button class="fr-btn" id="button-1321">
    Label bouton
</button>

Bouton simple SM

<button class="fr-btn fr-btn--sm" id="button-1324">
    Label bouton SM
</button>

Bouton simple LG

<button class="fr-btn fr-btn--lg" id="button-1327">
    Label bouton LG
</button>

Bouton désactivé

<button class="fr-btn" id="button-1330" disabled>
    Label bouton
</button>

Bouton icon à gauche

<button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left" id="button-1333">
    Label bouton
</button>

Bouton icon à droite

<button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right" id="button-1336">
    Label bouton
</button>

Bouton icon seule

<button class="fr-btn fr-icon-checkbox-circle-line" id="button-1339" title="[À MODIFIER - Label bouton]">
    Label 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>.

Bouton markup a href

Label bouton 

<a class="fr-btn" href="#[url - à modifier]" id="button-1342">
    Label bouton
</a>

Bouton secondaire

Bouton secondaire

<button class="fr-btn fr-btn--secondary" id="button-1348">
    Label bouton
</button>

Bouton secondaire désactivé

<button class="fr-btn fr-btn--secondary" id="button-1351" disabled>
    Label bouton
</button>

Bouton secondaire icon à gauche

<button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary" id="button-1354">
    Label bouton
</button>

Bouton secondaire icon à droite

<button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right fr-btn--secondary" id="button-1357">
    Label bouton
</button>

Bouton secondaire icon seule

<button class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary" id="button-1360" title="[À MODIFIER - Label bouton]">
    Label 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>.

Bouton secondaire markup a href

Label bouton 

<a class="fr-btn fr-btn--secondary" href="#[url - à modifier]" id="button-1363">
    Label bouton
</a>

Bouton tertiaire

Bouton tertiaire

<button class="fr-btn fr-btn--tertiary" id="button-1366">
    Label bouton
</button>

Bouton tertiaire désactivé

<button class="fr-btn fr-btn--tertiary" id="button-1369" disabled>
    Label bouton
</button>

Bouton tertiaire icon à gauche

<button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--tertiary" id="button-1372">
    Label bouton
</button>

Bouton tertiaire icon à droite

<button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right fr-btn--tertiary" id="button-1375">
    Label bouton
</button>

Bouton tertiaire icon seule

<button class="fr-btn fr-icon-checkbox-circle-line fr-btn--tertiary" id="button-1378" title="[À MODIFIER - Label bouton]">
    Label 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>.

Bouton tertiaire markup a href

Label bouton 

<a class="fr-btn fr-btn--tertiary" href="#[url - à modifier]" id="button-1381">
    Label bouton
</a>

Bouton tertiaire sans contour

Bouton tertiaire sans contour

<button class="fr-btn fr-btn--tertiary-no-outline" id="button-1384">
    Label bouton
</button>

Bouton tertiaire sans contour désactivé

<button class="fr-btn fr-btn--tertiary-no-outline" id="button-1387" disabled>
    Label bouton
</button>

Bouton tertiaire sans contour icon à gauche

<button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--tertiary-no-outline" id="button-1390">
    Label bouton
</button>

Bouton tertiaire sans contour icon à droite

<button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right fr-btn--tertiary-no-outline" id="button-1393">
    Label bouton
</button>

Bouton tertiaire sans contour icon seule

<button class="fr-btn fr-icon-checkbox-circle-line fr-btn--tertiary-no-outline" id="button-1396" title="[À MODIFIER - Label bouton]">
    Label 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>.

Bouton tertiaire sans contour markup a href

Label bouton 

<a class="fr-btn fr-btn--tertiary-no-outline" href="#[url - à modifier]" id="button-1399">
    Label bouton
</a>

Groupe de bouton

Groupe de boutons MD

<ul class="fr-btns-group">
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1401">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1402">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1403">
            Label bouton
        </button>
    </li>
</ul>

Groupe de boutons SM

<ul class="fr-btns-group fr-btns-group--sm">
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1405">
            Label bouton SM
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1406">
            Label bouton SM
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1407">
            Label bouton SM
        </button>
    </li>
</ul>

Groupe de boutons LG

<ul class="fr-btns-group fr-btns-group--lg">
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1409">
            Label bouton LG
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1410">
            Label bouton LG
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1411">
            Label bouton LG
        </button>
    </li>
</ul>

Groupe de boutons verticaux hiérarchisés avec icones

<ul class="fr-btns-group fr-btns-group--icon-left">
    <li>
        <button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left" id="button-1413">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary" id="button-1414">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary" id="button-1415">
            Label bouton
        </button>
    </li>
</ul>

Groupe de boutons inline

<ul class="fr-btns-group fr-btns-group--inline">
    <li>
        <button class="fr-btn" id="button-1417">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1418">
            Label bouton
        </button>
    </li>
</ul>

Groupe de boutons inline non hiérarchisés

<ul class="fr-btns-group fr-btns-group--inline">
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1420">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1421">
            Label bouton
        </button>
    </li>
</ul>

Groupe de boutons inline à partir du breakpoint SM

<ul class="fr-btns-group fr-btns-group--inline-sm">
    <li>
        <button class="fr-btn" id="button-1423">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1424">
            Label bouton
        </button>
    </li>
</ul>

Groupe de boutons inline à partir du breakpoint MD

<ul class="fr-btns-group fr-btns-group--inline-md">
    <li>
        <button class="fr-btn" id="button-1426">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1427">
            Label bouton
        </button>
    </li>
</ul>

Groupe de boutons inline à partir du breakpoint LG

<ul class="fr-btns-group fr-btns-group--inline-lg">
    <li>
        <button class="fr-btn" id="button-1429">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1430">
            Label bouton
        </button>
    </li>
</ul>

Groupe de boutons inversés en inline à partir du breakpoint SM

<ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm">
    <li>
        <button class="fr-btn" id="button-1432">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1433">
            Label bouton
        </button>
    </li>
</ul>

Groupe de boutons inline même taille (equisized)

<ul class="fr-btns-group fr-btns-group--equisized fr-btns-group--inline">
    <li>
        <button class="fr-btn" id="button-1435">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1436">
            Label bouton long
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1437">
            Label bouton plus long
        </button>
    </li>
</ul>

Groupe de boutons inline alignés a droite (equisized)

<ul class="fr-btns-group fr-btns-group--right fr-btns-group--equisized fr-btns-group--inline">
    <li>
        <button class="fr-btn" id="button-1439">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1440">
            Label bouton long
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1441">
            Label bouton plus long
        </button>
    </li>
</ul>

Groupe de boutons inline alignés au centre (equisized)

<ul class="fr-btns-group fr-btns-group--center fr-btns-group--equisized fr-btns-group--inline">
    <li>
        <button class="fr-btn" id="button-1443">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1444">
            Label bouton long
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1445">
            Label bouton plus long
        </button>
    </li>
</ul>

Groupe de boutons verticaux même taille (equisized)

<ul class="fr-btns-group fr-btns-group--equisized">
    <li>
        <button class="fr-btn" id="button-1447">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1448">
            Label bouton long
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1449">
            Label bouton plus long
        </button>
    </li>
</ul>

Groupe de boutons verticaux alignés a droite (equisized)

<ul class="fr-btns-group fr-btns-group--right fr-btns-group--equisized">
    <li>
        <button class="fr-btn" id="button-1451">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1452">
            Label bouton long
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1453">
            Label bouton plus long
        </button>
    </li>
</ul>

Groupe de boutons verticaux alignés au centre (equisized)

<ul class="fr-btns-group fr-btns-group--center fr-btns-group--equisized">
    <li>
        <button class="fr-btn" id="button-1455">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1456">
            Label bouton long
        </button>
    </li>
    <li>
        <button class="fr-btn fr-btn--secondary" id="button-1457">
            Label bouton plus long
        </button>
    </li>
</ul>

Groupe de boutons d'icones

<ul class="fr-btns-group">
    <li>
        <button class="fr-btn fr-icon-checkbox-circle-line" id="button-1459" title="[À MODIFIER - Label bouton]">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary" id="button-1460" title="[À MODIFIER - Label bouton]">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary" id="button-1461" title="[À MODIFIER - Label bouton]">
            Label bouton
        </button>
    </li>
</ul>

Groupe de boutons d'icones inline

<ul class="fr-btns-group fr-btns-group--inline">
    <li>
        <button class="fr-btn fr-icon-checkbox-circle-line" id="button-1463" title="[À MODIFIER - Label bouton]">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary" id="button-1464" title="[À MODIFIER - Label bouton]">
            Label bouton
        </button>
    </li>
    <li>
        <button class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary" id="button-1465" title="[À MODIFIER - Label bouton]">
            Label bouton
        </button>
    </li>
</ul>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.