DSFR v1.13.1

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 type="button" class="fr-btn">Libellé bouton</button>

Bouton simple SM

<button type="button" class="fr-btn fr-btn--sm">Libellé bouton SM</button>

Bouton simple LG

<button type="button" class="fr-btn fr-btn--lg">Libellé bouton LG</button>

Bouton désactivé

<button type="button" disabled class="fr-btn">Libellé bouton</button>

Bouton icon à gauche

<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">Libellé bouton</button>

Bouton icon à droite

<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right">Libellé bouton</button>

Bouton icon seule

<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>.

Bouton markup a href

Libellé bouton 

<a href="[url - à modifier]" class="fr-btn">Libellé bouton</a>

Bouton secondaire

Bouton secondaire

<button type="button" class="fr-btn fr-btn--secondary">Libellé bouton</button>

Bouton secondaire désactivé

<button type="button" disabled class="fr-btn fr-btn--secondary">Libellé bouton</button>

Bouton secondaire icon à gauche

<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">Libellé bouton</button>

Bouton secondaire icon à droite

<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right fr-btn--secondary">Libellé bouton</button>

Bouton secondaire icon seule

<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>.

Bouton secondaire markup a href

Libellé bouton 

<a href="[url - à modifier]" class="fr-btn fr-btn--secondary">Libellé bouton</a>

Bouton tertiaire

Bouton tertiaire

<button type="button" class="fr-btn fr-btn--tertiary">Libellé bouton</button>

Bouton tertiaire désactivé

<button type="button" disabled class="fr-btn fr-btn--tertiary">Libellé bouton</button>

Bouton tertiaire icon à gauche

<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--tertiary">Libellé bouton</button>

Bouton tertiaire icon à droite

<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right fr-btn--tertiary">Libellé bouton</button>

Bouton tertiaire icon seule

<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>.

Bouton tertiaire markup a href

Libellé bouton 

<a href="[url - à modifier]" class="fr-btn fr-btn--tertiary">Libellé bouton</a>

Bouton tertiaire sans contour

Bouton tertiaire sans contour

<button type="button" class="fr-btn fr-btn--tertiary-no-outline">Libellé bouton</button>

Bouton tertiaire sans contour désactivé

<button type="button" disabled class="fr-btn fr-btn--tertiary-no-outline">Libellé bouton</button>

Bouton tertiaire sans contour icon à gauche

<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--tertiary-no-outline">Libellé bouton</button>

Bouton tertiaire sans contour icon à droite

<button type="button" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-right fr-btn--tertiary-no-outline">Libellé bouton</button>

Bouton tertiaire sans contour icon seule

<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>.

Bouton tertiaire sans contour markup a href

Libellé bouton 

<a href="[url - à modifier]" class="fr-btn fr-btn--tertiary-no-outline">Libellé bouton</a>

Groupe de bouton

Groupe de boutons MD

<ul class="fr-btns-group">
    <li>
        <button type="button" id="button-1383" class="fr-btn fr-btn--secondary">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1384" class="fr-btn fr-btn--secondary">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1385" class="fr-btn fr-btn--secondary">Libellé bouton</button>
    </li>
</ul>

Groupe de boutons SM

<ul class="fr-btns-group fr-btns-group--sm">
    <li>
        <button type="button" id="button-1387" class="fr-btn fr-btn--secondary">Libellé bouton SM</button>
    </li>
    <li>
        <button type="button" id="button-1388" class="fr-btn fr-btn--secondary">Libellé bouton SM</button>
    </li>
    <li>
        <button type="button" id="button-1389" class="fr-btn fr-btn--secondary">Libellé bouton SM</button>
    </li>
</ul>

Groupe de boutons LG

<ul class="fr-btns-group fr-btns-group--lg">
    <li>
        <button type="button" id="button-1391" class="fr-btn fr-btn--secondary">Libellé bouton LG</button>
    </li>
    <li>
        <button type="button" id="button-1392" class="fr-btn fr-btn--secondary">Libellé bouton LG</button>
    </li>
    <li>
        <button type="button" id="button-1393" class="fr-btn fr-btn--secondary">Libellé 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 type="button" id="button-1395" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1396" 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-1397" class="fr-btn fr-icon-checkbox-circle-line fr-btn--icon-left fr-btn--secondary">Libellé bouton</button>
    </li>
</ul>

Groupe de boutons inline

<ul class="fr-btns-group fr-btns-group--inline">
    <li>
        <button type="button" id="button-1399" class="fr-btn">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1400" class="fr-btn fr-btn--secondary">Libellé bouton</button>
    </li>
</ul>

Groupe de boutons inline non hiérarchisés

<ul class="fr-btns-group fr-btns-group--inline">
    <li>
        <button type="button" id="button-1402" class="fr-btn fr-btn--secondary">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1403" class="fr-btn fr-btn--secondary">Libellé bouton</button>
    </li>
</ul>

Groupe de boutons inline à partir du breakpoint SM

<ul class="fr-btns-group fr-btns-group--inline-sm">
    <li>
        <button type="button" id="button-1405" class="fr-btn">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1406" class="fr-btn fr-btn--secondary">Libellé bouton</button>
    </li>
</ul>

Groupe de boutons inline à partir du breakpoint MD

<ul class="fr-btns-group fr-btns-group--inline-md">
    <li>
        <button type="button" id="button-1408" class="fr-btn">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1409" class="fr-btn fr-btn--secondary">Libellé bouton</button>
    </li>
</ul>

Groupe de boutons inline à partir du breakpoint LG

<ul class="fr-btns-group fr-btns-group--inline-lg">
    <li>
        <button type="button" id="button-1411" class="fr-btn">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1412" class="fr-btn fr-btn--secondary">Libellé 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 type="button" id="button-1414" class="fr-btn">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1415" class="fr-btn fr-btn--secondary">Libellé 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 type="button" id="button-1417" class="fr-btn">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1418" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
    </li>
    <li>
        <button type="button" id="button-1419" class="fr-btn fr-btn--secondary">Libellé 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 type="button" id="button-1421" class="fr-btn">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1422" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
    </li>
    <li>
        <button type="button" id="button-1423" class="fr-btn fr-btn--secondary">Libellé 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 type="button" id="button-1425" class="fr-btn">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1426" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
    </li>
    <li>
        <button type="button" id="button-1427" class="fr-btn fr-btn--secondary">Libellé 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 type="button" id="button-1429" class="fr-btn">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1430" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
    </li>
    <li>
        <button type="button" id="button-1431" class="fr-btn fr-btn--secondary">Libellé 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 type="button" id="button-1433" class="fr-btn">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1434" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
    </li>
    <li>
        <button type="button" id="button-1435" class="fr-btn fr-btn--secondary">Libellé 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 type="button" id="button-1437" class="fr-btn">Libellé bouton</button>
    </li>
    <li>
        <button type="button" id="button-1438" class="fr-btn fr-btn--secondary">Libellé bouton long</button>
    </li>
    <li>
        <button type="button" id="button-1439" class="fr-btn fr-btn--secondary">Libellé bouton plus long</button>
    </li>
</ul>

Groupe de boutons d'icones

<ul class="fr-btns-group">
    <li>
        <button title="[À MODIFIER - Libellé bouton]" type="button" id="button-1441" class="fr-btn fr-icon-checkbox-circle-line">Libellé bouton</button>
    </li>
    <li>
        <button title="[À MODIFIER - Libellé bouton]" type="button" id="button-1442" 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-1443" class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary">Libellé bouton</button>
    </li>
</ul>

Groupe de boutons d'icones inline

<ul class="fr-btns-group fr-btns-group--inline">
    <li>
        <button title="[À MODIFIER - Libellé bouton]" type="button" id="button-1445" class="fr-btn fr-icon-checkbox-circle-line">Libellé bouton</button>
    </li>
    <li>
        <button title="[À MODIFIER - Libellé bouton]" type="button" id="button-1446" 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-1447" class="fr-btn fr-icon-checkbox-circle-line fr-btn--secondary">Libellé bouton</button>
    </li>
</ul>

Paramètres d’affichage

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