Labels communicate the status or state of an individual item within a list or collection. They help users quickly distinguish status, for example, e.g. an event that has been cancelled vs one that is upcoming
Labels can help users skip or prioritise items at a glance
Labels are supplementary metadata. They do not replace primary content. They annotate it with a concise, consistent and scannable signal that reduces cognitive effort
Do's
- use labels consistently within a single list, applying the same vocabulary and meaning across all labelled items
- align label language to the content, e.g. 'Cancelled', 'Rescheduled', 'Upcoming' for an events listing
- ensure the states labels represent are distinct and support the user's task
Don'ts
- do not use labels for decorative or purely aesthetic purposes. Each label should carry a specific, functional meaning
- don't use more than 2 labels at the same time (in one list). This creates ambiguity and visual noise. If the number of states is large, consider a filter or structured table
- do not use vague or inconsistent labels across the same list, e.g. 'Ongoing' and 'Active'
When to use
- use in lists where the label facilitates user understanding
- use to communicate that a list contains a subset of items that are either highlighted or pinned outside of a sorting solution
- use in a list for time-related indicators, e.g. 'upcoming', 'cancelled', 'rescheduled' for events
- use in a list containing time-bound or action-driven items (e.g. open or closed period for calls for proposals/tenders) where labels can help users immediately identify which items are relevant to their situation without scanning through dates or supporting text
When not to use
- do not use for items outside of a list's context - labels are designed for use within collections of comparable items
- do not use when all items in a list share the same state - e.g. every item is published
- do not use when you need to categorise or classify content by topic, e.g. theme, type, etc. - instead use Tags, designed for category metadata rather than status indication