Labels: Canada.ca design system

On this page

• When to use
• What to avoid
• How to implement
• Research and blog posts
• Latest changes

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.

<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.

<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.

<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.

<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.

<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.

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

2021-02-08

Added label documentation to the design system