Buttons (Boutons)

Les boutons indiquent à l’utilisateur une action qui est accessible par le tap ou le clic. Même si un lien peut avoir une apparence de bouton, cette action doit être plus engageante qu’un simple lien. Le texte des boutons doit aider l’utilisateur à comprendre l’action produite.

Usage

Les boutons rendent les actions importantes visibles et permettent aussi des interactions autres qu’un lien. Par exemple, un bouton peut rediriger vers un page d’abonnement (lien avec engagement) ou permettre de valider un formulaire.

Comme le prévoit le HTML, chaque bouton a 4 états : normal (/ ou link), survolé (hover), cliqué (active) et avec focus (focus). Toutefois, la charte Ouest-France assigne la même apparence aux états survolé, cliqué, et avec focus.

Typologie des boutons

Primaire

Le bouton primaire met en évidence une action de grande importance. Il est utilisé principalement sur une action spécifique ou dans un formulaire. Son utilisation dans une page doit être restreinte pour éviter son amoindrissement par parasitage visuel des autres boutons primaires. Il devrait par ailleurs être unique parmi les boutons liés dans un groupe.

Secondaire

Le bouton secondaire est utilisé pour des actions de moindre importance. Il est souvent associé au bouton primaire comme étant un autre choix possible (p. ex. un bouton primaire « Valider » et un bouton secondaire « Annuler »).

Neutre

Le bouton neutre est utilisé pour des actions importantes mais moins que pour les boutons primaires et / ou qui ne sont pas liés à la marque (p. ex. des boutons de contrôle de vidéo ou d’audio).

Abonnement

Dans les spécificités d’un design système éditorial il y a la mise en avant du contexte d’abonnement. Un bouton d’abonnement est un bouton primaire de la couleur liée à l’univers de l’abonnement.

Boutons textuels ou avec pictogramme

En général on privilégiera les boutons textuels, mais il est possible d’utiliser des boutons avec un pictogramme ajouté au texte, voir même un pictogramme seul, dans certains cas où la compréhension de ce pictogramme est évidente. Ce pictogramme sera à gauche du texte s’il est là pour l’illustration simple et à droite du texte s’il s’agit d’une invitation à l’action.

Hauteurs de bouton

Les boutons sont disponibles en 2 hauteurs : la hauteur standard (44px, taille idéale pour l’interaction sur mobile) et une hauteur plus faible (34px, taille minimale pour l’interaction sur mobile). Cette version moins haute est a utiliser qu’exceptionnellement parce que moins accessible.

Bouton en pleine largeur

Le bouton pleine largeur s’adapte à la largeur du container afin d’optimiser son accessibilité et son poids visuel.

Bouton sur fond sombre

Il existe une version particulière de ces boutons afin qu’ils soient visibles sur un fond foncé. Les différentes caractéristiques sont identiques aux boutons "classiques", seuls les couleurs diffèrent.

Bonnes pratiques

Sur mobile, les boutons en pleine largeur sont fortement recommandés, car ils sont plus accessibles.
La hauteur d’un bouton est strictement identique, quelle que soit la taille de l’écran.
L’arrière-plan uniforme permet une visibilité optimale des boutons.
La couleur d’arrière-plan doit être suffisamment contrastée avec celle du bouton.
Un même bouton doit être présent une seule fois dans une même page, même si l’action est particulièrement importante. Par exemple, un bouton sticky permet de le mettre en avant au lieu de le multiplier.
La 1^re lettre du bouton est en majuscule, le reste est en minuscule.
Mettre le texte en majuscule n’est pas autorisé, même pour donner plus d’importance à un bouton spécifique.
Ne pas finaliser le texte par une ponctuation, ex. : un point d’exclamation.
Les textes doivent indiquer clairement et précisément le résultat de l’action. Un bouton user-centric devrait commencer par un verbe d’action impactant, ex. : « Accepter » au lieu de « Oui » ou « S’inscrire » au lieu de « Soumettre ».
Le texte est limité à une ligne et composé de 3 mots maximum.

Boutons d’un même sujet

Ces boutons ont la même largeur.
Les boutons sont espacés de 20px (horizontalement et verticalement).
Un seul bouton primaire est présent.
Deux boutons secondaires maximums sont présents. De plus, ils sont positionnés de manière proche.
Sur mobile, le bouton primaire se trouve au-dessus des boutons secondaires.
Sur desktop, l’ensemble des boutons est aligné à gauche sauf s’il est dans un container, ex. : pop-in, card. Lorsque les boutons sont alignés à gauche, le bouton primaire est le plus à gauche. Lorsqu’ils sont alignés à droite ou au centre, le bouton primaire est le plus à droite (principe de Gutenberg).

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>),
Helpers (classes d’aide).

Un bouton a besoin d’au moins 2 classes : su-button pour appliquer le design commun aux boutons et une seconde pour le design lié à sa fonction (comme su-primary).

Les classes de bouton peuvent être appliquées indifféremment sur des <button>, des <input type="button"> ou des <a>.

Un composant <button> est de type submit par défaut. Par conséquent, sur une page contenant un formulaire, si ce bouton ne doit pas le soumettre, il faut lui préciser type="button".

Bouton primaire

Sa classe de fonction est su-primary.

Standard

<button class="su-button su-primary">Bouton primaire</button>
<a href="javascript:;" class="su-button su-primary">Bouton primaire</a>

Pour l’abonnement

<button class="su-button su-subscription">Bouton abonnement</button>
<a href="javascript:;" class="su-button su-subscription">Bouton abonnement</a>

Négatif

La version négative du bouton primaire sert quand l’arrière-plan ne permet pas d’utiliser le bouton primaire standard (ie : sur un fond rouge), ou qu’un bouton secondaire négatif est lui aussi présent dans la même zone. Il faut utiliser la classe su-negative en plus de su-primary sur le bouton lui-même pour lui donner cette apparence.

<div style="background: DimGray; padding: 10px">
    <button class="su-button su-primary su-negative">Bouton négatif</button>
    <a href="javascript:;" class="su-button su-primary su-negative">Bouton négatif</a>
</div>

Il est toutefois aussi possible de mettre cette classe sur un parent pour passer tout le contenu en plus du bouton (texte, liens… cf. ces composants) en négatif.

<div class="su-negative" style="background: DimGray; padding: 10px">
    <button class="su-button su-primary">Bouton négatif</button>
    <a href="javascript:;" class="su-button su-primary">Bouton négatif</a>
</div>

Bouton secondaire

Ici, la classe de fonction est su-secondary.

<button class="su-button su-secondary">Bouton secondaire</button>
<a href="javascript:;" class="su-button su-secondary">Bouton secondaire</a>

Négatif

La version négative du bouton secondaire sert quand l’arrière-plan ne permet pas d’utiliser le bouton secondaire standard (ie : sur un fond rouge). Il faut utiliser la classe su-negative en plus de su-secondary sur le bouton lui-même pour lui donner cette apparence.

<div style="background: DimGray; padding: 10px">
    <button class="su-button su-secondary su-negative">Bouton négatif</button>
    <a href="javascript:;" class="su-button su-secondary su-negative">Bouton négatif</a>
</div>

Il est toutefois aussi possible de mettre cette classe sur un parent pour passer tout le contenu en plus du bouton (texte, liens… cf. ces composants) en négatif.

<div class="su-negative" style="background: DimGray; padding: 10px">
    <button class="su-button su-secondary">Bouton négatif</button>
    <a href="javascript:;" class="su-button su-secondary">Bouton négatif</a>
</div>

Bouton neutre

La classe de fonction est su-neutral.

<button class="su-button su-neutral">Bouton neutre</button>
<a href="javascript:;" class="su-button su-neutral">Bouton neutre</a>

Bouton texte avec pictogramme

Le pictogramme peut se placer à gauche ou à droite du texte en fonction de son rôle : action ou illustration. Il faudra donc utiliser une des 2 classes su-action-icon ou su-illustration-icon sur le bouton (dans le cas contraire, l’icône ne s’affichera pas) et inclure le pictogramme avant ou après le texte du bouton séparé de celui-ci par une espace.

Pictogramme d’action / d’illustration

Voici des exemples du pictogramme d’action, à droite et du pictogramme d’illustration, à gauche, dans des <button>, des <a> en primaire, secondaire ou abonnement. Notez bien la présence de l’espace…

<button class="su-button su-primary su-action-icon">Continuer <i class="su-icon">suivant</i></button>
<a href="javascript:;" role="button" class="su-button su-primary su-illustration-icon"><i class="su-icon">bloqué</i> Débloquer</a>
<button class="su-button su-secondary su-action-icon">Continuer <i class="su-icon">suivant</i></button>
<a href="javascript:;" role="button" class="su-button su-secondary su-illustration-icon"><i class="su-icon">bloqué</i> Débloquer</a>
<button class="su-button su-subscription su-action-icon">Continuer <i class="su-icon">suivant</i></button>
<a href="javascript:;" role="button" class="su-button su-subscription su-illustration-icon"><i class="su-icon">bloqué</i> Débloquer</a>

Négatif

<div style="background: DimGray; padding: 10px">
    <button class="su-button su-primary su-action-icon su-negative">Continuer <i class="su-icon">suivant</i></button>
    <a href="javascript:;" role="button" class="su-button su-primary su-illustration-icon su-negative"><i class="su-icon">bloqué</i> Débloquer</a>
    <button class="su-button su-secondary su-action-icon su-negative">Continuer <i class="su-icon">suivant</i></button>
    <a href="javascript:;" role="button" class="su-button su-secondary su-illustration-icon su-negative"><i class="su-icon">bloqué</i> Débloquer</a>
    <button class="su-button su-subscription su-action-icon su-negative">Continuer <i class="su-icon">suivant</i></button>
    <a href="javascript:;" role="button" class="su-button su-subscription su-illustration-icon su-negative"><i class="su-icon">bloqué</i> Débloquer</a>
</div>

Fonte d’icône, SVG inline ou SVG appelé en balise d’image ?

Pour ce pictogramme vous pouvez utiliser au choix une icône de notre police d’icônes, un SVG directement inclus dans le DOM ou un fichier SVG appelé en <img>.

La 3^e solution, le SVG appelé, implique l’utilisation d’un filtre pour assurer la couleur de l’icône, ce qui peut produire un résultat inattendu si le SVG source n’est pas conforme.

Le cas de la fonte d’icônes est assez simple et illustré dans les exemples ci-dessus.
Pour le SVG inline il y a 2 solutions : vous pouvez utiliser des icônes au dessin plein (la couleur de dessin de l’icône est appliquée dans le fond de formes avec l’attribut fill) ou des icônes au dessin filaire (la couleur de dessin de l’icône est appliquée sur le contour des formes avec l’attribut stroke). Par défaut, ce sera la 1^re version qui sera utilisable, toutefois, si vous ajoutez la classe su-stroke sur le bouton, vous pourrez utiliser un picto filaire…
Pour l’utilisation du SVG appelé il faut appeler en src d’une balise <img> votre icône SVG.

Contraintes du SVG pour les usage 2 et 3 :

Avoir une hauteur et une largeur maximales de 24px. Dans le cas contraire, il sera forcé à 24px pour la hauteur, ce qui provoquera un affichage imprévu…
Ne pas avoir de couleur de remplissage (fill) définie dans le code SVG afin de pouvoir la changer via les CSS du thème (NB, un fill="none" ne pose pas de problème).
Ne pas avoir de dégradé (linearGradient).
Alléger le SVG en passant par un outil comme SVGO serait un plus pour les performances…

SVG inline standard

<a class="su-button su-primary su-illustration-icon" href="javascript:;" role="button">
    <svg viewBox="0 0 17 24" width="17" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd">
        <path d="M14.348 2.399C12.677.847 10.72.035 8.5.035c-2.387 0-4.416.836-5.872 2.387C1.076 4.092.265 6.05.265 8.271c0 1.073.19 2.123.526 2.911l.023.048c.024.024 1.695 3.151 3.39 6.206C7.832 24 7.951 24 8.5 24c.549 0 .669 0 4.297-6.564 1.694-3.079 3.365-6.182 3.388-6.206l.025-.048c.334-.788.525-1.838.525-2.911 0-2.364-.835-4.393-2.387-5.872zm.549 8.21c-2.005 3.748-5.156 9.5-6.397 11.506-1.241-2.03-4.391-7.758-6.397-11.506-.262-.62-.406-1.456-.406-2.315 0-1.838.669-3.485 1.957-4.869C4.848 2.135 6.495 1.491 8.5 1.491c1.838 0 3.485.67 4.87 1.958 1.289 1.194 1.933 2.84 1.933 4.845 0 .86-.144 1.694-.406 2.315z"/>
        <path d="M8.5 3.807c-1.218 0-2.244.43-3.127 1.337-.907.906-1.336 1.933-1.336 3.127 0 1.217.429 2.242 1.336 3.126.908.907 1.934 1.337 3.127 1.337 1.218 0 2.244-.43 3.126-1.337.908-.907 1.337-1.934 1.337-3.126 0-1.218-.43-2.244-1.337-3.127-.882-.907-1.908-1.337-3.126-1.337zm2.125 6.612c-.62.62-1.313.906-2.125.906-.835 0-1.503-.285-2.124-.906-.62-.62-.907-1.313-.907-2.125 0-.835.287-1.504.907-2.125.62-.62 1.312-.906 2.124-.906s1.504.286 2.125.906c.62.62.906 1.313.906 2.125s-.286 1.48-.906 2.125z"/>
    </svg>
    Localiser
</a>
<a class="su-button su-secondary su-illustration-icon" href="javascript:;" role="button">
    <svg viewBox="0 0 17 24" width="17" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd">
        <path d="M14.348 2.399C12.677.847 10.72.035 8.5.035c-2.387 0-4.416.836-5.872 2.387C1.076 4.092.265 6.05.265 8.271c0 1.073.19 2.123.526 2.911l.023.048c.024.024 1.695 3.151 3.39 6.206C7.832 24 7.951 24 8.5 24c.549 0 .669 0 4.297-6.564 1.694-3.079 3.365-6.182 3.388-6.206l.025-.048c.334-.788.525-1.838.525-2.911 0-2.364-.835-4.393-2.387-5.872zm.549 8.21c-2.005 3.748-5.156 9.5-6.397 11.506-1.241-2.03-4.391-7.758-6.397-11.506-.262-.62-.406-1.456-.406-2.315 0-1.838.669-3.485 1.957-4.869C4.848 2.135 6.495 1.491 8.5 1.491c1.838 0 3.485.67 4.87 1.958 1.289 1.194 1.933 2.84 1.933 4.845 0 .86-.144 1.694-.406 2.315z"/>
        <path d="M8.5 3.807c-1.218 0-2.244.43-3.127 1.337-.907.906-1.336 1.933-1.336 3.127 0 1.217.429 2.242 1.336 3.126.908.907 1.934 1.337 3.127 1.337 1.218 0 2.244-.43 3.126-1.337.908-.907 1.337-1.934 1.337-3.126 0-1.218-.43-2.244-1.337-3.127-.882-.907-1.908-1.337-3.126-1.337zm2.125 6.612c-.62.62-1.313.906-2.125.906-.835 0-1.503-.285-2.124-.906-.62-.62-.907-1.313-.907-2.125 0-.835.287-1.504.907-2.125.62-.62 1.312-.906 2.124-.906s1.504.286 2.125.906c.62.62.906 1.313.906 2.125s-.286 1.48-.906 2.125z"/>
    </svg>
    Localiser
</a>
<a class="su-button su-subscription su-illustration-icon" href="javascript:;" role="button">
    <svg viewBox="0 0 17 24" width="17" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd">
        <path d="M14.348 2.399C12.677.847 10.72.035 8.5.035c-2.387 0-4.416.836-5.872 2.387C1.076 4.092.265 6.05.265 8.271c0 1.073.19 2.123.526 2.911l.023.048c.024.024 1.695 3.151 3.39 6.206C7.832 24 7.951 24 8.5 24c.549 0 .669 0 4.297-6.564 1.694-3.079 3.365-6.182 3.388-6.206l.025-.048c.334-.788.525-1.838.525-2.911 0-2.364-.835-4.393-2.387-5.872zm.549 8.21c-2.005 3.748-5.156 9.5-6.397 11.506-1.241-2.03-4.391-7.758-6.397-11.506-.262-.62-.406-1.456-.406-2.315 0-1.838.669-3.485 1.957-4.869C4.848 2.135 6.495 1.491 8.5 1.491c1.838 0 3.485.67 4.87 1.958 1.289 1.194 1.933 2.84 1.933 4.845 0 .86-.144 1.694-.406 2.315z"/>
        <path d="M8.5 3.807c-1.218 0-2.244.43-3.127 1.337-.907.906-1.336 1.933-1.336 3.127 0 1.217.429 2.242 1.336 3.126.908.907 1.934 1.337 3.127 1.337 1.218 0 2.244-.43 3.126-1.337.908-.907 1.337-1.934 1.337-3.126 0-1.218-.43-2.244-1.337-3.127-.882-.907-1.908-1.337-3.126-1.337zm2.125 6.612c-.62.62-1.313.906-2.125.906-.835 0-1.503-.285-2.124-.906-.62-.62-.907-1.313-.907-2.125 0-.835.287-1.504.907-2.125.62-.62 1.312-.906 2.124-.906s1.504.286 2.125.906c.62.62.906 1.313.906 2.125s-.286 1.48-.906 2.125z"/>
    </svg>
    Localiser

SVG inline négatif

<div style="background: DimGray; padding: 10px">
    <a class="su-button su-primary su-illustration-icon su-negative" href="javascript:;" role="button">
        <svg viewBox="0 0 17 24" width="17" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd">
        <path d="M14.348 2.399C12.677.847 10.72.035 8.5.035c-2.387 0-4.416.836-5.872 2.387C1.076 4.092.265 6.05.265 8.271c0 1.073.19 2.123.526 2.911l.023.048c.024.024 1.695 3.151 3.39 6.206C7.832 24 7.951 24 8.5 24c.549 0 .669 0 4.297-6.564 1.694-3.079 3.365-6.182 3.388-6.206l.025-.048c.334-.788.525-1.838.525-2.911 0-2.364-.835-4.393-2.387-5.872zm.549 8.21c-2.005 3.748-5.156 9.5-6.397 11.506-1.241-2.03-4.391-7.758-6.397-11.506-.262-.62-.406-1.456-.406-2.315 0-1.838.669-3.485 1.957-4.869C4.848 2.135 6.495 1.491 8.5 1.491c1.838 0 3.485.67 4.87 1.958 1.289 1.194 1.933 2.84 1.933 4.845 0 .86-.144 1.694-.406 2.315z"/>
        <path d="M8.5 3.807c-1.218 0-2.244.43-3.127 1.337-.907.906-1.336 1.933-1.336 3.127 0 1.217.429 2.242 1.336 3.126.908.907 1.934 1.337 3.127 1.337 1.218 0 2.244-.43 3.126-1.337.908-.907 1.337-1.934 1.337-3.126 0-1.218-.43-2.244-1.337-3.127-.882-.907-1.908-1.337-3.126-1.337zm2.125 6.612c-.62.62-1.313.906-2.125.906-.835 0-1.503-.285-2.124-.906-.62-.62-.907-1.313-.907-2.125 0-.835.287-1.504.907-2.125.62-.62 1.312-.906 2.124-.906s1.504.286 2.125.906c.62.62.906 1.313.906 2.125s-.286 1.48-.906 2.125z"/>
    </svg>
        Localiser
    </a>
    <a class="su-button su-secondary su-illustration-icon su-negative" href="javascript:;" role="button">
        <svg viewBox="0 0 17 24" width="17" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd">
        <path d="M14.348 2.399C12.677.847 10.72.035 8.5.035c-2.387 0-4.416.836-5.872 2.387C1.076 4.092.265 6.05.265 8.271c0 1.073.19 2.123.526 2.911l.023.048c.024.024 1.695 3.151 3.39 6.206C7.832 24 7.951 24 8.5 24c.549 0 .669 0 4.297-6.564 1.694-3.079 3.365-6.182 3.388-6.206l.025-.048c.334-.788.525-1.838.525-2.911 0-2.364-.835-4.393-2.387-5.872zm.549 8.21c-2.005 3.748-5.156 9.5-6.397 11.506-1.241-2.03-4.391-7.758-6.397-11.506-.262-.62-.406-1.456-.406-2.315 0-1.838.669-3.485 1.957-4.869C4.848 2.135 6.495 1.491 8.5 1.491c1.838 0 3.485.67 4.87 1.958 1.289 1.194 1.933 2.84 1.933 4.845 0 .86-.144 1.694-.406 2.315z"/>
        <path d="M8.5 3.807c-1.218 0-2.244.43-3.127 1.337-.907.906-1.336 1.933-1.336 3.127 0 1.217.429 2.242 1.336 3.126.908.907 1.934 1.337 3.127 1.337 1.218 0 2.244-.43 3.126-1.337.908-.907 1.337-1.934 1.337-3.126 0-1.218-.43-2.244-1.337-3.127-.882-.907-1.908-1.337-3.126-1.337zm2.125 6.612c-.62.62-1.313.906-2.125.906-.835 0-1.503-.285-2.124-.906-.62-.62-.907-1.313-.907-2.125 0-.835.287-1.504.907-2.125.62-.62 1.312-.906 2.124-.906s1.504.286 2.125.906c.62.62.906 1.313.906 2.125s-.286 1.48-.906 2.125z"/>
    </svg>
        Localiser
    </a>
    <a class="su-button su-subscription su-illustration-icon su-negative" href="javascript:;" role="button">
        <svg viewBox="0 0 17 24" width="17" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd">
        <path d="M14.348 2.399C12.677.847 10.72.035 8.5.035c-2.387 0-4.416.836-5.872 2.387C1.076 4.092.265 6.05.265 8.271c0 1.073.19 2.123.526 2.911l.023.048c.024.024 1.695 3.151 3.39 6.206C7.832 24 7.951 24 8.5 24c.549 0 .669 0 4.297-6.564 1.694-3.079 3.365-6.182 3.388-6.206l.025-.048c.334-.788.525-1.838.525-2.911 0-2.364-.835-4.393-2.387-5.872zm.549 8.21c-2.005 3.748-5.156 9.5-6.397 11.506-1.241-2.03-4.391-7.758-6.397-11.506-.262-.62-.406-1.456-.406-2.315 0-1.838.669-3.485 1.957-4.869C4.848 2.135 6.495 1.491 8.5 1.491c1.838 0 3.485.67 4.87 1.958 1.289 1.194 1.933 2.84 1.933 4.845 0 .86-.144 1.694-.406 2.315z"/>
        <path d="M8.5 3.807c-1.218 0-2.244.43-3.127 1.337-.907.906-1.336 1.933-1.336 3.127 0 1.217.429 2.242 1.336 3.126.908.907 1.934 1.337 3.127 1.337 1.218 0 2.244-.43 3.126-1.337.908-.907 1.337-1.934 1.337-3.126 0-1.218-.43-2.244-1.337-3.127-.882-.907-1.908-1.337-3.126-1.337zm2.125 6.612c-.62.62-1.313.906-2.125.906-.835 0-1.503-.285-2.124-.906-.62-.62-.907-1.313-.907-2.125 0-.835.287-1.504.907-2.125.62-.62 1.312-.906 2.124-.906s1.504.286 2.125.906c.62.62.906 1.313.906 2.125s-.286 1.48-.906 2.125z"/>
    </svg>
        Localiser
    </a>
</div>

Avec SVG inline filaire

<a class="su-button su-primary su-illustration-icon su-stroke" href="javascript:;" role="button">
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path style="stroke-linecap:round;stroke-linejoin:round;stroke-width:2;" d="M3 6.7A11 11 0 0 1 5.8 3M21 6.7A11 11 0 0 0 18.2 3M9 17v1a3 3 0 0 0 6 0v-1M10 5a2 2 0 0 1 4 0 7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6"></path>
    </svg>
    Alerte
</a>
<a class="su-button su-secondary su-illustration-icon su-stroke" href="javascript:;" role="button">
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path style="stroke-linecap:round;stroke-linejoin:round;stroke-width:2;" d="M3 6.7A11 11 0 0 1 5.8 3M21 6.7A11 11 0 0 0 18.2 3M9 17v1a3 3 0 0 0 6 0v-1M10 5a2 2 0 0 1 4 0 7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6"></path>
    </svg>
    Alerte
</a>
<a class="su-button su-subscription su-illustration-icon su-stroke" href="javascript:;" role="button">
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path style="stroke-linecap:round;stroke-linejoin:round;stroke-width:2;" d="M3 6.7A11 11 0 0 1 5.8 3M21 6.7A11 11 0 0 0 18.2 3M9 17v1a3 3 0 0 0 6 0v-1M10 5a2 2 0 0 1 4 0 7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6"></path>
    </svg>
    Alerte
</a>

SVG appelé standard

<a class="su-button su-primary su-illustration-icon" href="javascript:;" role="button">
    <img src="https://media.ouest-france.fr/v1/fonts/f9f4a4687fb76ab8660791156bfa555f-anniversaire.svg" alt="gâteau d'anniversaire">
    Offre anniversaire
</a>
<a class="su-button su-secondary su-illustration-icon" href="javascript:;" role="button">
    <img src="https://media.ouest-france.fr/v1/fonts/f9f4a4687fb76ab8660791156bfa555f-anniversaire.svg" alt="gâteau d'anniversaire">
    Offre anniversaire
</a>
<a class="su-button su-subscription su-illustration-icon" href="javascript:;" role="button">
    <img src="https://media.ouest-france.fr/v1/fonts/f9f4a4687fb76ab8660791156bfa555f-anniversaire.svg" alt="gâteau d'anniversaire">
    Offre anniversaire

SVG appelé négatif

<div style="background: DimGray; padding: 10px">
    <a class="su-button su-primary su-illustration-icon su-negative" href="javascript:;" role="button">
        <img src="https://media.ouest-france.fr/v1/fonts/f9f4a4687fb76ab8660791156bfa555f-anniversaire.svg" alt="gâteau d'anniversaire">
        Offre anniversaire
    </a>
    <a class="su-button su-secondary su-illustration-icon su-negative" href="javascript:;" role="button">
        <img src="https://media.ouest-france.fr/v1/fonts/f9f4a4687fb76ab8660791156bfa555f-anniversaire.svg" alt="gâteau d'anniversaire">
        Offre anniversaire
    </a>
    <a class="su-button su-subscription su-illustration-icon su-negative" href="javascript:;" role="button">
        <img src="https://media.ouest-france.fr/v1/fonts/f9f4a4687fb76ab8660791156bfa555f-anniversaire.svg" alt="gâteau d'anniversaire">
        Offre anniversaire
    </a>
</div>

Bouton avec pictogramme seul

Les boutons avec seulement une icône sont généralement à proscrire afin d’éviter les risques d’incompréhension. Toutefois, dans certains cas (espace restreint) ou avec certaines icônes universellement reconnues (bouton « play » p. ex.) ce type de bouton est justifié.

Comme les boutons textes avec icône, ces boutons peuvent exister en primaire, secondaire, neutre, négatif, avec pictogramme issu de la fonte d’icônes, ou avec SVG appelé ou inline…

Standard

<button class="su-button su-primary su-icon-only"><i class="su-icon">audio</i></button>
<a href="javascript:;" role="button" class="su-button su-secondary su-icon-only"><i class="su-icon">Apple-podcast</i></a>
<button class="su-button su-neutral su-icon-only"><i class="su-icon">Google-podcast</i></button>

Avec SVG

<button class="su-button su-neutral su-icon-only">
    <svg viewBox="0 0 17 24" width="17" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd">
        <path d="M14.348 2.399C12.677.847 10.72.035 8.5.035c-2.387 0-4.416.836-5.872 2.387C1.076 4.092.265 6.05.265 8.271c0 1.073.19 2.123.526 2.911l.023.048c.024.024 1.695 3.151 3.39 6.206C7.832 24 7.951 24 8.5 24c.549 0 .669 0 4.297-6.564 1.694-3.079 3.365-6.182 3.388-6.206l.025-.048c.334-.788.525-1.838.525-2.911 0-2.364-.835-4.393-2.387-5.872zm.549 8.21c-2.005 3.748-5.156 9.5-6.397 11.506-1.241-2.03-4.391-7.758-6.397-11.506-.262-.62-.406-1.456-.406-2.315 0-1.838.669-3.485 1.957-4.869C4.848 2.135 6.495 1.491 8.5 1.491c1.838 0 3.485.67 4.87 1.958 1.289 1.194 1.933 2.84 1.933 4.845 0 .86-.144 1.694-.406 2.315z"/>
        <path d="M8.5 3.807c-1.218 0-2.244.43-3.127 1.337-.907.906-1.336 1.933-1.336 3.127 0 1.217.429 2.242 1.336 3.126.908.907 1.934 1.337 3.127 1.337 1.218 0 2.244-.43 3.126-1.337.908-.907 1.337-1.934 1.337-3.126 0-1.218-.43-2.244-1.337-3.127-.882-.907-1.908-1.337-3.126-1.337zm2.125 6.612c-.62.62-1.313.906-2.125.906-.835 0-1.503-.285-2.124-.906-.62-.62-.907-1.313-.907-2.125 0-.835.287-1.504.907-2.125.62-.62 1.312-.906 2.124-.906s1.504.286 2.125.906c.62.62.906 1.313.906 2.125s-.286 1.48-.906 2.125z"/>
    </svg>
</button>

Avec SVG filaire

Pour un SVG filaire, il faut là aussi ajouter la classe su-stroke.

<button class="su-button su-neutral su-icon-only su-stroke">
    <svg width="24" height="24" viewBox="0 0 24 24">
      <path style="stroke-linecap:round;stroke-linejoin:round;stroke-width:2;" d="M3 6.7A11 11 0 0 1 5.8 3M21 6.7A11 11 0 0 0 18.2 3M9 17v1a3 3 0 0 0 6 0v-1M10 5a2 2 0 0 1 4 0 7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6"></path>
    </svg>
</button>

Contextes particuliers

Boutons inactifs

L’aspect inactif peut être porté par la classe su-disabled (issu des classes d’aides) ou par l’attribut disabled.

<button class="su-button su-primary" disabled="disabled">Primaire inactif</button>
<button class="su-button su-secondary su-disabled">Secondaire inactif</button>
<button class="su-button su-subscription su-disabled" disabled="disabled">Abonnement inactif</button>
<button class="su-button su-neutral su-disabled" disabled="disabled">Neutre inactif</button>
<div class="su-negative" style="background: DimGray; padding: 10px">
    <button class="su-button su-primary" disabled="disabled">Primaire inactif</button>
    <button class="su-button su-secondary su-disabled">Secondaire inactif</button>
    <button class="su-button su-subscription su-disabled" disabled="disabled">Abonnement inactif</button>
    <button class="su-button su-neutral su-disabled" disabled="disabled">Neutre inactif</button>
</div>

Petits boutons

Pour rendre un bouton plus petit, ajouter la classe su-small.

<button class="su-button su-primary su-small">Bouton petit</button>
<button class="su-button su-secondary su-small">Bouton petit</button>
<a href="javascript:;" role="button" class="su-button su-neutral su-icon-only su-small"><i class="su-icon">Apple-podcast</i></a>

Bouton pleine largeur

Pour un bouton pleine largeur, ajouter la classe su-fullwidth.

<button class="su-button su-primary su-fullwidth">Bouton pleine largeur</button>

Bouton pleine largeur sur mobile

Et pour un bouton pleine largeur uniquement sur mobile, ajouter la classe su-fullwidth-mobile.

<button class="su-button su-primary su-fullwidth-mobile">Bouton pleine largeur mobile</button>

Accessibilité

Règles minimales :

Chaque bouton doit avoir un "nom" explicite (value sur un input, texte dans les les balises <button> ou <a>).
Si le bouton ne peut avoir ce nom explicite, lui ajouter un aria-label (p. ex. : aria-label="Fermer" sur un bouton qui ne comporte que le "X").
Si votre bouton n’est pas un bouton au sens HTML (p. ex. : une balise <a>, un <span>) il faut lui adjoindre role="button" si ce simili bouton n’a pas un rôle de lien mais bien un rôle d’action (il n’y a donc pas de href ou a un href="javascript:;").

<a class="su-button su-primary" href="javascript:;" role="button">Bouton en lien</a>

Tracking

Afin de permettre le tracking du clic sur un bouton vous devez ajouter un attribut data-trk-button avec la valeur souhaitée. Le fait de choisir une valeur unique par page simplifie le tracking mais n’est pas une condition obligatoire. Cet attribut est valable pour un vrai bouton (<button>, input type="button") ou tout objet qui a un rôle de bouton (<a href="javascript:;" class="su-button">).

<button class="su-button su-primary" data-trk-button="Je valide">Je valide</button>
<a class="su-button su-primary" href="javascript:;" role="button" data-trk-button="Fermer">Fermer</a>

Liste des classes disponibles

su-button
su-primary
su-secondary
su-subscription
su-small
su-illustration-icon
su-action-icon
su-stroke
su-negative

Classes annexes

su-fullwidth (dépendant des Helpers (classes d’aide))
su-fullwidth-mobile (dépendant des Helpers (classes d’aide))
su-disabled (dépendant des Helpers (classes d’aide))
su-icon (dépendant des icônes de SipaUI)