Labels: Canada.ca design system

  • Last updated: 2021-02-08

Labels are visual indicators that assign a tag to items such as events, products, programs or services.

Default Primary Success Information Warning Danger

On this page

When to use

Use labels to:

  • signal that an item belongs to a category (for example, to show if some programs are open, some closed, and some will open soon)
  • label or stamp items with additional information, like the date an item was updated, or the closure of an area
  • show different stages of progress in a list of items (for example, to show which vaccines are under review and which ones are approved)

In your design, ensure labels are placed very close to the item they apply to.

What to avoid

  • Don't use long labels or full sentences - keep them short
  • Don't use labels that have overlapping meaning
  • Don't use labels to add style to text

How to implement

Use the right type of label:

  1. Default
  2. Primary
  3. Success
  4. Information
  5. Warning
  6. Danger

1. Default label

When to use: Use to give additional information about an item, like adding dates to a list of items.

Code
<a href="#">Evaluation of the Citizenship Program</a> <span class="label label-default">July 2020</span>

2. Primary label

When to use: Use to signal an important information about an item, like when a new program is not yet open but will be soon.

Canada Recovery Benefit (CRB) Opening October 12

Code
<h3 class="h5"><a href="#">Canada Recovery Benefit (CRB)</a> <span class="label label-primary">Opening October 12</span></h3>

3. Success label

When to use: Use to signal an item is open, available or approved.

Protecting Canada’s Fresh Water Open - Accepting input

Code
<p><a href="#">Protecting Canada’s Fresh Water</a> <span class="label label-success">Open - Accepting input</span></p>

4. Information label

When to use: Use to tag an item with a value, like identifying a new blog post. "New" labels should be temporary.

Code
<h3 class="h5"><a href="#">Labelling study: which words work best</a> <span class="label label-info">New</span></h3>

5. Warning label

When to use: Use when you want to bring attention to an item to warn people of a change, like if a program is ending soon.

Code
<h3 class="h5"><a href="#">Canada Emergency Response Benefit (CERB)</a> <span class="label label-warning">Ending soon</span></h3>

6. Danger label

When to use: Use when an item is no longer available, like when a program has ended or an area is closed.

Code
<h3 class="h5"><a href="#">Canada Emergency Response Benefit (CERB)</a> <span class="label label-danger">Closed</span></h3>

Research and blog posts

We tested the use of labels successfully during the transition period between the Canada Economic Response Benefit and the new benefits that replaced it. Adding labels to the different programs on the topic page made it easier for people to understand what was available to them.

Latest changes

Added label documentation to the design system

Discussion

Discuss the pattern in github issues

Date modified: