Badges

Use badges to indicate the status of a page or section.

  • Content:
    @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
  • Filesystem Path: fractal/components/components/badges/badges.scss
  • Size: 2.5 KB
  • Content:
    .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
  • Filesystem Path: fractal/components/components/badges/badges.css
  • Size: 979 Bytes

Guiding principle: Help the user be successful the first time.


When to use this component

Badges are read-only status indicators.

Use the badge component when there is a status of something and it is useful for the user to know about that status.

For example:

  • “submitted,” “under review” or ”approved” statuses for an application
  • a “beta” status of a page

When not to use this component

Do not use a badge to bring a user’s attention to important content.

Consider using a callout, critical alert or page alert instead.


Badge colours

If you’re using more than one status, consider using the “default light” and “default neutral light” badges along with the solid-coloured badges to distinguish the importance of the statuses.

Solid badges are more visible than the light badges. Use different colours to make the statuses more recognizable.

Example


Set of badges, “completed” in the default, “in progress” in the default light, “not started” in the neutral light.

System feedback badges

System feedback badges are used to represent the status of the system. Each colour is associated with a specific type of system feedback.

A red alert badge indicates an urgent or negative status, such as an error status.

A yellow warning badge cautions the user, such as an “experimental” or ”beta” status.

A green success badge indicates a positive or successful status, such as an “open” versus “closed” service location.

Do not overuse system feedback badges.


Placement

When placing a badge that is applicable to an entire page, place it near the top-left corner of the page.

Example


Warning badge labeled “beta,” with text between the application header and the page heading.

Badges can be placed under a heading to indicate the status of a section.

Example


Two examples showing a badge under a heading. The second example has an additional line of text “Explanation and call to action.

Badges can be used in-line with a list of text.

Example


Badges used in-line with text, with badges placed to the right-side of text.
Badges used in-line with text, with badges to the left-side of text.

Best practices

Do:

  • Use as few statuses as required. The more statuses there are, the harder it is for users to remember them.
  • Consider using just one status. For instance, with an “online” or “offline” status, you may only need to show the online status.
  • Use the same colour badge consistently for the same status.
  • Write concise and direct labels. Only use more than one word if necessary.
  • Use 15 characters or less in your badge label.

Don’t:

  • Use contractions in a label.
  • Use light badges on a non-white background.
  • Use a badge in an alert.
  • Make badges links — they should not be interactive.
  • Include “Status:” before the tag. The status can stand on its own.

Technical specifications

Accessibility

Do not rely on colour alone to convey information — it’s not sufficient enough to meet accessibility standards. Support the meaning of the colour with relevant copy.

Do not change the colours of the badges. The badge colours already have the proper contrast ratio.

All-caps text is usually not recommended for text readability, but it works well with very short labels (one or two words in isolation) that need to stand out from other content.

If you have any questions or feedback, please get in touch.