Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

Badges

Utilisez les badges pour indiquer l’état d’une page ou d’une section.

  • Contenu: 
    @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/typography.variables' as typography;
@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/font-weights.variables' as fontWeights;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;

.ontario-badge__container {
	display: flex;
	flex-direction: column;
	gap: spacing.$spacing-7;
	align-items: flex-start;
	padding: spacing.$spacing-5 spacing.$spacing-4;
}

.ontario-badge__label {
	display: block;
	text-align: left;
	font-weight: fontWeights.$ontario-font-weights-semi-bold;
	margin-bottom: spacing.$spacing-3;
	font-size: fontSizes.$ontario-font-size-small;
	color: colours.$ontario-greyscale-70;
}

.ontario-badge {
	display: inline-block;
	background-color: colours.$ontario-colour-information-light;
	color: colours.$ontario-greyscale-70;
	padding: spacing.$spacing-1 spacing.$spacing-2;
	font-family: typography.$ontario-font-raleway-modified;
	font-size: fontSizes.$ontario-font-size-standard-body-text;
	font-weight: fontWeights.$ontario-font-weights-bold;
	line-height: globalFunctions.px-to-rem(25);
	letter-spacing: 0.03rem;
	text-transform: uppercase;
}

.ontario-badge--default-light {
	background-color: colours.$ontario-colour-information-light;
	color: colours.$ontario-greyscale-70;
}

.ontario-badge--default-heavy {
	background-color: colours.$ontario-colour-information;
	color: colours.$ontario-colour-white;
}

.ontario-badge--neutral-light {
	background-color: colours.$ontario-greyscale-5;
	color: colours.$ontario-greyscale-70;
}

.ontario-badge--neutral-heavy {
	background-color: colours.$ontario-colour-black;
	color: colours.$ontario-colour-white;
}

.ontario-badge--alert-heavy {
	background-color: colours.$ontario-colour-alert;
	color: colours.$ontario-colour-white;
}

.ontario-badge--warning-heavy {
	background-color: colours.$ontario-colour-warning;
	color: colours.$ontario-colour-black;
}

.ontario-badge--success-heavy {
	background-color: colours.$ontario-colour-success;
	color: colours.$ontario-colour-white;
}
  • URL: /components/raw/badges/badges.scss
  • Chemin du système de fichiers: fractal/components/components/badges/badges.scss
  • Taille: 2.5 KB
  • Contenu: 
    .ontario-badge__container{display:flex;flex-direction:column;gap:2.5rem;align-items:flex-start;padding:1.5rem 1rem}.ontario-badge__label{display:block;text-align:left;font-weight:600;margin-bottom:.75rem;font-size:.875rem;color:#4d4d4d}.ontario-badge{display:inline-block;background-color:#e2f0f4;color:#4d4d4d;padding:.25rem .5rem;font-family:"Raleway","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;font-weight:700;line-height:1.5625rem;letter-spacing:.03rem;text-transform:uppercase}.ontario-badge--default-light{background-color:#e2f0f4;color:#4d4d4d}.ontario-badge--default-heavy{background-color:#1080a6;color:#fff}.ontario-badge--neutral-light{background-color:#f2f2f2;color:#4d4d4d}.ontario-badge--neutral-heavy{background-color:#1a1a1a;color:#fff}.ontario-badge--alert-heavy{background-color:#cd0000;color:#fff}.ontario-badge--warning-heavy{background-color:#ffd440;color:#1a1a1a}.ontario-badge--success-heavy{background-color:#118847;color:#fff}
  • URL: /components/raw/badges/badges.css
  • Chemin du système de fichiers: fractal/components/components/badges/badges.css
  • Taille: 979 Bytes

Principe directeur : Commencer simplement.

Quand utiliser cette composante

Les badges sont des indicateurs de l’état « lecture seule ».

Utilisez la composante de badge lorsque l’utilisateur a besoin de connaître un état.

Par exemple :

  • Les états « soumis », « en cours d’examen » ou « approuvé » d’une application
  • L’état « bêta » d’une page

Quand ne pas utiliser cette composante

N’utilisez pas de badge pour attirer l’attention d’un utilisateur sur un contenu important.

Envisagez plutôt d’utiliser un encadré, une bannière d’alerte critique ou une alerte de page.

Couleurs de badge

Si vous utilisez plus d’un état, envisagez d’utiliser les badges de couleur « défaut pâle » et « défaut neutre pâle » ainsi que les badges de couleur unie pour distinguer l’importance des états.

Les badges de couleur unie sont plus visibles que les badges pâles. Utilisez différentes couleurs pour rendre les états plus reconnaissables.

Exemple

Jeu de badges, « terminé » en défaut, « en cours » en défaut pâle, « pas commencé » en neutre pâle.

Badges de rétroaction du système

Les badges de rétroaction du système sont utilisés pour représenter l’état du système. Chaque couleur est associée à un type particulier de rétroaction du système.

Un badge rouge d’alerte indique un état urgent ou négatif, tel qu’un état d’erreur.

Un badge jaune d’avertissement avertit l’utilisateur d’un état « expérimental » ou « bêta », par exemple.

Un badge vert de réussite indique un état positif ou réussi, comme un point de service « ouvert » et non « fermé ».

N’abusez pas des badges de rétroaction du système.

Placement

Lorsque vous placez un badge qui s’applique à une page entière, placez-le près du coin supérieur gauche de la page.

Exemple

Badge d’avertissement étiqueté « bêta », avec un texte entre l’en-tête de l’application et l’en-tête de la page.

Les badges peuvent être placés sous un en-tête pour indiquer l’état d’une section.

Exemple

Deux exemples montrant un badge sous un en-tête. Le deuxième exemple comporte une ligne de texte supplémentaire « Explication et appel à l’action ».

Les badges peuvent être utilisés sur la même ligne qu’une liste de texte.

Exemple

Badge utilisé sur la même ligne que le texte et placé à droite de celui-ci.
Badge utilisé sur la même ligne que le texte et placé à gauche de celui-ci.

Pratiques exemplaires

À faire

  • N’utilisez que les états nécessaires. Plus il y a d’états, plus il est difficile pour les utilisateurs de les mémoriser.
  • Envisagez d’utiliser un seul état. Par exemple, lorsque l’état est « en ligne » ou « hors ligne », vous pourriez n’avoir à afficher l’état que lorsque celui-ci est en ligne.
  • Par souci d’uniformité, utilisez toujours la même couleur de badge pour un état.
  • Rédiger des étiquettes concises et directes. N’utilisez plusieurs mots que lorsque cela est inévitable.
  • Utilisez 15 caractères ou moins sur l’étiquette de votre badge.

À ne pas faire

  • Ne contractez pas les mots sur une étiquette.
  • Ne contractez pas les mots sur une étiquette.
  • Ne contractez pas les mots sur une étiquette.
  • N’insérez pas de lien dans les badges. Ceux-ci ne doivent pas être interactifs.
  • N’écrivez pas « État » avant l’étiquette. L’état est explicite.

Spécifications techniques

Accessibilité

Ne vous fiez pas uniquement à la couleur pour transmettre une information, cela ne suffit pas pour répondre aux normes d’accessibilité. Donnez un sens à la couleur avec un texte pertinent.

Ne changez pas la couleur des badges. Ceux-ci ont déjà le bon rapport de contraste.

Le texte en majuscules n’est habituellement pas recommandé pour la lisibilité du texte, mais il fonctionne bien avec des étiquettes très courtes (un ou deux mots isolés) qui doivent se distinguer des autres contenus.

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