Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

Notre espace de noms npm a changé. Les développeurs doivent mettre à jour leurs projets pour continuer à accéder à nos composantes Web.

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.

Utilisez seulement un bouton lorsque vous voulez susciter une action.

Types de boutons

Bouton primaire

Employez un bouton primaire pour attirer l’attention sur l’action principale 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.

En cas de doute, l’action par défaut d’une page doit être déclenchée par un bouton primaire.

Boutons secondaires

Employez un bouton secondaire pour un appel à l’action moins important sur une page.

Boutons tertiaires

Employez des boutons tertiaires pour réduire l’importance des appels à l’action sur une page. Cette option est facultative et le formulaire ou le site devrait fonctionner même sans leur utilisation.

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.

Au lieu de désactiver un bouton, vous devez :

  • garder les boutons activés;
  • développer une gestion des erreurs qui affiche des commentaires sur les champs qui n’ont pas été saisis ou sur les erreurs de saisie.

Groupes de boutons

Les boutons peuvent être regroupés. En plaçant les boutons les uns à côté des autres, on crée un groupe d’actions similaires ou apparentées. Un groupe de boutons associe un bouton principal avec une ou plusieurs options secondaires ou tertiaires.

Le bouton principal doit :

  • déclencher l’action par défaut d’une page;
  • être le premier bouton qui reçoit l’attention dans l’ordre des onglets.

Utilisez des boutons secondaires ou tertiaires pour des actions qui peuvent être attendues, mais qui sont employées moins souvent.

Ordre des boutons

Utilisez les boutons en fonction soit :

  • de leur hiérarchie d’importance
  • d’un ordre relativement judicieux basé sur l’interaction la plus probable ou la plus souhaitée.

Cela permettra aux utilisateurs de se concentrer sur l’objectif principal de la page.

Exemple : ordinateur

Groupe de boutons disposés de gauche à droite avec « Continuer » commebouton primaire, « Enregistrer l'ébauche » comme bouton secondaire et « Annuler » comme bouton tertiaire.

Exemple : appareil mobile

Groupe de boutons disposés de haut en bas avec « Continuer » comme bouton primaire, « Enregistrer l'ébauche » comme bouton secondaire et « Annuler » comme bouton tertiaire.

Placement des boutons

Placement correct

Alignez les boutons vers la gauche pour :

  • inciter la scannabilité et la découvrabilité
  • guider les utilisateurs par un chemin clair vers l’achèvement.

Sur les écrans de plus grande taille, les yeux des utilisateurs suivent généralement un schéma « F ». Le schéma « F » décrit un schéma de suivi oculaire courant, selon lequel les utilisateurs balaient d’abord horizontalement le haut d’une page ou d’une interface (la ligne horizontale supérieure du « F »), puis verticalement le côté gauche (la ligne verticale descendante du « F »).

En suivant ce schéma, vous facilitez la tâche de l’utilisateur en plaçant le bouton principal à l’endroit où ses yeux sont naturellement attirés.

Schéma en « F »

Le diagramme montrant le mouvement des yeux dans le schéma « F », arrivant aux boutons de l'appel à l'action à la fin.

L’alignement à gauche est plus pratique pour les utilisateurs qui se servent de la touche de tabulation pour naviguer, car ils n’ont pas à regarder de l’autre côté de l’écran.

Il est également utile aux développeurs, qui n’ont pas à modifier l’attribut tabindex(en anglais seulement), car le bouton reste le premier élément à gauche après le dernier élément du formulaire.

Placement incorrect

Le placement incorrect comprend :

  • les boutons centrés
  • les boutons placés à droite
  • la répartition de plusieurs boutons sur l’écran.

Ces placements obligent l’utilisateur à déplacer ses yeux plus loin pour chercher d’autres boutons, ce qui signifie qu’il lui faut plus de temps pour dégager le sens de l’instruction.

À faire

Exemple d'un écran de formulaire avec les boutons alignés à la gauche de la page.

À ne pas faire

Exemples d'écrans de formulaire avec divers placements incorrects de boutons.

En outre, l’utilisateur d’une loupe d’écran peut rater des boutons importants qui ne se trouvent pas immédiatement à gauche.

Niveau d'agrandissement de l'écran de 400 %

Exemple d'un écran de formulaire avec un agrandissement du zoom de 400 % et d'un bouton primaire aligné à droite non visible.

Exception

Pour les boutons de fermeture qui permettent de fermer une fenêtre ou une boîte de dialogue, placez le bouton dans le coin supérieur droit.

Appareil mobile

Sur les appareils mobiles, le groupement des boutons s’empilent verticalement. Le premier bouton dans l’ordre de la source apparaît en haut de la colonne.

Le premier bouton est habituellement le bouton primaire. Si vous voulez modifier l’ordre sur l’appareil mobile, vous pouvez changer l’ordre d’affichage des boutons pour les écrans de petite taille en utilisant les classes de décalage vers la gauche/vers la droite.

Boutons Précédent

Évitez de placer un bouton Précédent dans un groupe de boutons. Par exemple, placez un bouton Précédent à côté d’un bouton « Continuer ».

Suivez les recommandations de placement d’un bouton Précédent en haut du formulaire.

Meilleures pratiques

À faire

  • veiller à ce que le texte des boutons soit clair, descriptif et orienté vers l’action (par exemple, « Enregistrer le profil » ou « Télécharger le reçu »)
  • utiliser la casse de phrases (ne mettre en majuscule que la première lettre du premier mot)
  • utiliser un maximum de 25 caractères, espaces compris
  • veiller à ce que les boutons destructeurs tels que « Annuler » ou « Supprimer » soient visuellement distincts (par exemple, lorsqu’ils sont présentés avec d’autres options, il peut s’agir d’un bouton tertiaire. Si nécessaire, confirmez avec l’utilisateur pour éviter les clics accidentels.)

À ne pas faire

  • modifier la couleur des boutons
  • souligner le texte des boutons primaires ou secondaires

Spécifications techniques

La largeur des boutons (160px minimum) doit correspondre à la taille de l’étiquette detexte avec un rembourrage supplémentaire :

  • 24px de rembourrage interne sur les côtés droit et gauche du texte du bouton.
  • 16px de remplissage interne en haut et en bas du texte du bouton.

Les boutons d’un groupe seront séparés par une espace (32px). Sur les appareils mobiles, les boutons sont disposés verticalement avec une espace de (24px) entre eux. Ceci est intégré dans le bouton CSS.

Exemple : ordinateur

Un groupe de boutons primaires et secondaires avec une espace de 32 px entre eux.

Exemple : appareil mobile

Un groupe de boutons primaires et secondaires avec une espace de 24 px entre eux.

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