Skip to content
ShannonTucker edited this page Apr 1, 2022 · 5 revisions

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

Overview

Label types

Usage

Check out the Canada.ca design system to learn more about when to use and how to implement labels.

When to use

Labels should be used to to describe where in a process something is. Below are examples of when to use the different label types.

  • Use the success label to indicate something has been completed.
  • Use the information label to indicate that something is "in development."
  • Use the warning to indicate that an action is required that is over due or a status change is upcoming.
  • Use the danger label to indicate something is closed or a service is down.

When NOT to use

  • Do not use labels in a list of links.
  • Avoid using the label "NEW" to bring attention to an item since the meaning of new is arbitrary. Use a different component to call attention to the item, such as a media call out card.

How we created this component- 4A assessment

This pattern was imported from Canada.ca and we augmented the component by sunsetting the primary label, changing the default label to a tag component and updating documentation to included guidance around when to use the labels. The updated labels can be found in the Extended GC Design Library - DECD.

Clone this wiki locally