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'; @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables; @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing; @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours; @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints; @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography; @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as placeholders; @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights; $ontario-button-bg-primary: colours.$ontario-colour-link; $ontario-button-bg-primary--hover: colours.$ontario-colour-link--hover; $ontario-button-bg-primary--active: colours.$ontario-colour-link--active; $ontario-button-bg-secondary: colours.$ontario-colour-white; $ontario-focus-transition: box-shadow 0.1s ease-in-out; .ontario-button { border: none; border-radius: globalVariables.$global-radius; box-sizing: border-box; box-shadow: none; display: inline-block; font-size: 1.125rem; font-family: typography.$ontario-font-open-sans; font-weight: fontWeights.$ontario-font-weights-semi-bold; line-height: calc(14 / 9); margin: spacing.$spacing-0 calc(#{spacing.$spacing-4} + #{spacing.$spacing-3}) spacing.$spacing-5 spacing.$spacing-0; min-width: 10rem; padding: math.div(spacing.$spacing-4 + spacing.$spacing-1, 2) spacing.$spacing-5; text-align: center; text-decoration: none; cursor: pointer; &:focus, &:active { @extend %ontario-focus; } @media screen and (max-width: breakpoints.$small-breakpoint) { margin-right: spacing.$spacing-0; display: block; width: globalVariables.$full-width; } .ontario-icon { margin-right: 4px; } } .ontario-button--primary { background-color: $ontario-button-bg-primary; color: colours.$ontario-colour-white; &:hover { background-color: $ontario-button-bg-primary--hover; color: colours.$ontario-colour-white; } &:focus { background-color: $ontario-button-bg-primary--hover; color: colours.$ontario-colour-white; transition: background-color 0.2s ease-out, $ontario-focus-transition; } &:active { background-color: $ontario-button-bg-primary--active; color: colours.$ontario-colour-white; transition: background-color 0s, $ontario-focus-transition; } &:visited { color: colours.$ontario-colour-white; } } .ontario-button--secondary { background-color: $ontario-button-bg-secondary; border: 2px solid colours.$ontario-colour-link; color: colours.$ontario-colour-link; padding-top: spacing.$spacing-2; padding-bottom: spacing.$spacing-2; &:hover { background-color: colours.$ontario-colour-button-secondary--hover; border-color: colours.$ontario-colour-link--hover; color: colours.$ontario-colour-link--hover; } &:focus { background-color: colours.$ontario-colour-button-secondary--hover; border-color: colours.$ontario-colour-link--hover; color: colours.$ontario-colour-link--hover; transition: background-color 0.2s ease-out, $ontario-focus-transition; } &:active { background-color: colours.$ontario-colour-button-secondary--active; border-color: colours.$ontario-colour-link--active; color: colours.$ontario-colour-link--active; transition: background-color 0s, $ontario-focus-transition; } &:visited { color: colours.$ontario-colour-link; } } .ontario-button--tertiary { background-color: transparent; color: colours.$ontario-colour-link; text-decoration: underline; &:hover { background-color: colours.$ontario-colour-button-tertiary--hover; color: $ontario-button-bg-primary--hover; text-decoration: underline; } &:focus { background-color: colours.$ontario-colour-button-tertiary--hover; color: colours.$ontario-colour-link--hover; text-decoration: underline; transition: background-color 0.2s ease-out, $ontario-focus-transition; } &:active { background-color: colours.$ontario-colour-button-tertiary--active; color: colours.$ontario-colour-link--active; text-decoration: underline; transition: background-color 0s, $ontario-focus-transition; } &:visited { color: colours.$ontario-colour-link; } }
- URL: /components/raw/buttons/buttons.scss
- Chemin du système de fichiers: fractal/components/components/buttons/buttons.scss
- Taille: 4.4 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
Appareil mobile
À 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 »
À 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.
Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.