Components

Labels

Labels are used to indicate the different states for items in a list. They bring supplementary meaning by adding an indicative state (label) that is visually distinct (background colour) from other elements.

Do's

  • keep the message consistent on a single list of items and express meaning based on the content in which it is being used (e.g. "canceled" for events)
  • keep the label succinct (1-2 words)

Don'ts

  • don't use 2 labels at the same time (in one list)

When to use

  • when you have items in a list with multiple states (e.g. featured item & generic list item; canceled, rescheduled & upcoming event)

When not to use

  • when all items in a list have the same state (e.g. search list items)