Boutons

Installez des boutons pour permettre à l’utilisateur d’effectuer une action importante, par exemple entamer une opération ou accepter un achat.

  • Contenu:
    @use "sass:math";
    @import "../../../theme/assets/styles/sass/variables-import";
    @import "../../../theme/assets/styles/sass/tools/focus.placeholder";
    
    $ontario-button-bg-primary: $ontario-colour-link;
    $ontario-button-bg-primary--hover: $ontario-colour-link--hover;
    $ontario-button-bg-primary--active: $ontario-colour-link--active;
    $ontario-button-bg-secondary: $ontario-colour-white;
    
    .ontario-button {
        border: none;
        border-radius: $global-radius;
        box-sizing: border-box;
        box-shadow: none;
        display: inline-block;
        font-size: 1.125rem;
        font-family: $ontario-font-open-sans;
        font-weight: 600;
        line-height: calc(14 / 9);
        margin: $spacing-0 calc(#{$spacing-4} + #{$spacing-3}) $spacing-5 $spacing-0;
        min-width: 10rem;
        padding: math.div($spacing-4 + $spacing-1, 2) $spacing-5;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
    
        &:focus,
        &:active {
            @extend %ontario-focus;
        }
    
        @media screen and (max-width: $small-breakpoint) {
            margin-right: 0;
            display: block;
            width: $full-width;
        }
    
        .ontario-icon {
            margin-right: 4px;
        }
    }
    
    .ontario-button--primary {
        background-color: $ontario-button-bg-primary;
        color: $ontario-colour-white;
    
        &:hover {
            background-color: $ontario-button-bg-primary--hover;
            color: $ontario-colour-white;
        }
    
        &:focus {
            background-color: $ontario-button-bg-primary--hover;
            color: $ontario-colour-white;
            transition: background-color 0.2s ease-out, $ontario-focus-transition;
        }
    
        &:active {
            background-color: $ontario-button-bg-primary--active;
            color: $ontario-colour-white;
            transition: background-color 0s, $ontario-focus-transition;
        }
    
        &:visited {
            color: $ontario-colour-white;
        }
    }
    
    .ontario-button--secondary {
        background-color: $ontario-button-bg-secondary;
        border: 2px solid $ontario-colour-link;
        color: $ontario-colour-link;
        padding-top: $spacing-2;
        padding-bottom: $spacing-2;
    
        &:hover {
            background-color: $ontario-colour-button-secondary--hover;
            border-color: $ontario-colour-link--hover;
            color: $ontario-colour-link--hover;
        }
    
        &:focus {
            background-color: $ontario-colour-button-secondary--hover;
            border-color: $ontario-colour-link--hover;
            color: $ontario-colour-link--hover;
            transition: background-color 0.2s ease-out, $ontario-focus-transition;
        }
    
        &:active {
            background-color: $ontario-colour-button-secondary--active;
            border-color: $ontario-colour-link--active;
            color: $ontario-colour-link--active;
            transition: background-color 0s, $ontario-focus-transition;
        }
    
        &:visited {
            color: $ontario-colour-link;
        }
    }
    
    .ontario-button--tertiary {
        background-color: transparent;
        color: $ontario-colour-link;
        text-decoration: underline;
    
        &:hover {
            background-color: $ontario-colour-button-tertiary--hover;
            color: $ontario-button-bg-primary--hover;
            text-decoration: underline;
        }
    
        &:focus {
            background-color: $ontario-colour-button-tertiary--hover;
            color: $ontario-colour-link--hover;
            text-decoration: underline;
            transition: background-color 0.2s ease-out, $ontario-focus-transition;
        }
    
        &:active {
            background-color: $ontario-colour-button-tertiary--active;
            color: $ontario-colour-link--active;
            text-decoration: underline;
            transition: background-color 0s, $ontario-focus-transition;
        }
    
        &:visited {
            color: $ontario-colour-link;
        }
    }
    
  • URL: /components/raw/buttons/buttons.scss
  • Chemin du système de fichiers: fractal/components/components/buttons/buttons.scss
  • Taille: 3.7 KB
  • Contenu:
    .ontario-button:focus,.ontario-button:active{box-shadow:0 0 0 4px #009adb;outline:4px solid transparent;transition:box-shadow .1s ease-in-out}.ontario-button{border:none;border-radius:4px;box-sizing:border-box;box-shadow:none;display:inline-block;font-size:1.125rem;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:600;line-height:1.5555555556;margin:0 calc(1rem + 0.75rem) 1.5rem 0;min-width:10rem;padding:.625rem 1.5rem;text-align:center;text-decoration:none;cursor:pointer}@media screen and (max-width: 40em){.ontario-button{margin-right:0;display:block;width:100%}}.ontario-button .ontario-icon{margin-right:4px}.ontario-button--primary{background-color:#06c;color:#fff}.ontario-button--primary:hover{background-color:#00478f;color:#fff}.ontario-button--primary:focus{background-color:#00478f;color:#fff;transition:background-color .2s ease-out,box-shadow .1s ease-in-out}.ontario-button--primary:active{background-color:#002142;color:#fff;transition:background-color 0s,box-shadow .1s ease-in-out}.ontario-button--primary:visited{color:#fff}.ontario-button--secondary{background-color:#fff;border:2px solid #06c;color:#06c;padding-top:.5rem;padding-bottom:.5rem}.ontario-button--secondary:hover{background-color:#e0f0ff;border-color:#00478f;color:#00478f}.ontario-button--secondary:focus{background-color:#e0f0ff;border-color:#00478f;color:#00478f;transition:background-color .2s ease-out,box-shadow .1s ease-in-out}.ontario-button--secondary:active{background-color:#c2e0ff;border-color:#002142;color:#002142;transition:background-color 0s,box-shadow .1s ease-in-out}.ontario-button--secondary:visited{color:#06c}.ontario-button--tertiary{background-color:transparent;color:#06c;text-decoration:underline}.ontario-button--tertiary:hover{background-color:#e8e8e8;color:#00478f;text-decoration:underline}.ontario-button--tertiary:focus{background-color:#e8e8e8;color:#00478f;text-decoration:underline;transition:background-color .2s ease-out,box-shadow .1s ease-in-out}.ontario-button--tertiary:active{background-color:#d1d1d1;color:#002142;text-decoration:underline;transition:background-color 0s,box-shadow .1s ease-in-out}.ontario-button--tertiary:visited{color:#06c}
  • URL: /components/raw/buttons/buttons.css
  • Chemin du système de fichiers: fractal/components/components/buttons/buttons.css
  • Taille: 2.2 KB

Principe directeur : Faire preuve de cohérence

Quand utiliser cette composante

Employez des boutons lorsque vous voulez que l’utilisateur fasse quelque chose (souvent appelé « appel à l’action »); par exemple, qu’il :

  • lance un processus de demande ou une transaction;
  • consente à faire un paiement;
  • télécharge un PDF.

N’utilisez pas de bouton si vous n’encouragez pas une action. Les boutons ne doivent pas avoir la même fonction qu’un hyperlien, qui envoie habituellement l’utilisateur sur une autre page ou dans une partie différente de la même page.


Types de boutons

Employez un bouton primaire pour attirer l’attention sur la principale action que vous voulez inciter l’utilisateur à entreprendre. Évitez l’insertion de plusieurs boutons primaires sur une page, à moins que la page comporte des appels à l’action d’égale importance.

Employez un bouton secondaire pour un appel à l’action moins important sur une page. Évitez l’insertion de plusieurs boutons secondaires pour que l’utilisateur ne se demande pas ce qu’il doit faire ensuite. Demandez plutôt au rédacteur de simplifier ou de fragmenter le contenu de manière à ne pas avoir besoin de plusieurs boutons secondaires.

Employez des boutons tertiaires pour les hyperliens qui doivent fonctionner comme un bouton, comme « modifier » ou « annuler », dans des demandes. Le recours à plusieurs boutons tertiaires sur une page est correct.

Boutons désactivés

La désactivation des boutons jusqu’au moment où les utilisateurs ont correctement rempli un formulaire peut générer des problèmes d’utilisation et d’accessibilité. Les boutons désactivés peuvent créer des barrières pour les utilisateurs de technologies d’assistance et les utilisateurs ayant des déficiences physiques ou cognitives. Ils peuvent en outre être déroutants et frustrants pour tous les utilisateurs – ils n’aident pas l’utilisateur à comprendre ce qu’il doit faire pour continuer sa démarche.

Une meilleure approche consisterait à garder les boutons activés et à développer une gestion des erreurs qui affiche des commentaires clairs sur les champs qui n’ont pas été saisis ou sur les erreurs de saisie lorsque l’utilisateur tente de soumettre le formulaire. Pour obtenir des conseils portant sur les messages d’erreur, consultez Alertes de page.


Spécifications techniques

Type de bouton Couleur Largeur minimale
Bouton primaire Arrière-plan par défaut : #0066CC
Police : #FFFFFF
Arrière-plan de survol : #00478F
Arrière-plan actif : #002142
160px
Bouton secondaire Arrière-plan par défaut : #FFFFFF
Bordure et police par défaut : #0066CC
Arrière-plan de survol : #E0F0FF
Bordure et police de survol : #00478F
Arrière-plan actif : #C2E0FF
Bordure et police actives : #002142
160px
Bouton tertiaire Arrière-plan par défaut : aucun
Bordure par défaut : aucun
Police par défaut : #0066CC
Arrière-plan de survol : #E8E8E8
Police de survol : #00478F
Arrière-plan actif : #D1D1D1
Police active : #002142
160px

La largeur des boutons primaires, secondaires et tertiaires (minimum de 160 px) doit être de la taille du texte de l’étiquette plus le remplissage additionnel :

  • 24 px de remplissage interne sur la droite et la gauche du texte du bouton
  • 16 px de remplissage interne en haut et en bas du texte du bouton

L’espacement entre les boutons devrait être de 32 px pour un ordinateur et de 24 px pour les appareils mobiles.

Ordinateur

Exemples montrant le remplissage normal des boutons primaires, secondaires et tertiaires en mode bureau.

Appareil mobile

Exemples montrant le remplissage normal des boutons primaires, secondaires et tertiaires en mode appareil mobile avec une limite de 25 caractères.

À faire :

  • S’assurer que le texte est clair, descriptif et orienté vers l’action (p. ex. « Enregistrez votre profil » ou « Téléchargez votre reçu »).
  • Rédiger en minuscules (les majuscules servent seulement de première lettre au premier mot).
  • Utiliser un maximum de 25 caractères, espaces compris.
  • Placer des boutons sous les éléments de formulaire.
    • Lors de la lecture en ligne, les yeux des lecteurs suivent habituellement un schéma en « F ». Vous leur simplifiez donc la tâche si vous placez les appels à l’action dans un bouton vers lequel les yeux vont naturellement se diriger.

Schéma en « F »

Illustration montrant divers points de lecture créant une forme en F de haut en bas menant à un bouton.

À ne pas faire :

  • Changer la couleur des boutons.
  • Souligner le texte des boutons primaires ou secondaires.
  • Employer des boutons primaires et secondaires, à moins qu’ils soient absolument nécessaires.
    • Les boutons tertiaires ne sont pas aussi proéminents que les boutons primaires ou secondaires, donc vous pouvez en insérer quelques‑uns, au besoin.

Pour nous joindre

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.