Labels

Small 'chips' that help categorize or label user-generated content

Label

Healthy
Show details
Healthy
Published: February 21, 2024
Updated: February 21, 2024

 

Label - button

Healthy
Show details
Healthy
Published: February 21, 2024
Updated: February 21, 2024

 

Label group

Healthy
Show details
Healthy
Published: February 21, 2024
Updated: February 21, 2024

 

Label - overflow

Healthy
Show details
Healthy
Published: February 21, 2024
Updated: February 21, 2024

 

Overview

Labels are defined by the user to help categorize or label user-generated content. Small labels are used in tables and within cards and large labels are used in header sections on pages. Label editing and Label buttons are reserved for the large size variant.

🟢 Label / Size=Large, Truncated=False, :hover=False, :focused=False

🟢 Label / Size=Large, Truncated=False, :hover=False, :focused=False

Design

Structure

🟢 Label / Size=Large, Truncated=False, :hover=False, :focused=False

🟢 Label / Size=Large, Truncated=False, :hover=False, :focused=False

🟢 Label Button / Type=Edit, :hover=False, :active=False, :focus=False

🟢 Label Button / Type=Edit, :hover=False, :active=False, :focus=False

🟢 Label Button / Type=Add, :hover=False, :active=False, :focus=False

🟢 Label Button / Type=Add, :hover=False, :active=False, :focus=False

🟢 Label Overflow / Size=Large, :hover=False, :focused=False

🟢 Label Overflow / Size=Large, :hover=False, :focused=False

Labels consist of a small container with text and, optionally, an icon or a dismiss button. Their design should be simple yet distinct to stand out within their context.

  • Container: A small, rounded rectangle that holds the tag's content.
  • Text: The label or information the tag represents.
  • Icon (served for add/edit buttons): icons in Labels are reserved for buttons to add and edit Labels
  • Dismiss Button (Optional): A button, often represented by a close icon, allowing the removal of the tag.

 

Variants

Sizes

  • Small: used in tables and within cards
  • Large: used in header sections on pages or places where labels can be edited (includes button variations for edit and add)
🟢 Label / Size=Small, Truncated=False, :hover=False, :focused=False

🟢 Label / Size=Small, Truncated=False, :hover=False, :focused=False

🟢 Label / Size=Small, Truncated=False, :hover=True, :focused=False

🟢 Label / Size=Small, Truncated=False, :hover=True, :focused=False

🟢 Label / Size=Small, Truncated=False, :hover=False, :focused=True

🟢 Label / Size=Small, Truncated=False, :hover=False, :focused=True

🟢 Label / Size=Large, Truncated=False, :hover=True, :focused=False

🟢 Label / Size=Large, Truncated=False, :hover=True, :focused=False

🟢 Label / Size=Large, Truncated=False, :hover=False, :focused=False

🟢 Label / Size=Large, Truncated=False, :hover=False, :focused=False

🟢 Label / Size=Large, Truncated=False, :hover=False, :focused=True

🟢 Label / Size=Large, Truncated=False, :hover=False, :focused=True

 

States

  • Default: The standard appearance of a tag when not being interacted with.
  • Hover: Indicates when a user's pointer is over the tag.
  • Focus: Visible during keyboard navigation, indicating the tag is ready for interaction.
🟢 Label / Size=Large, Truncated=False, :hover=False, :focused=False

🟢 Label / Size=Large, Truncated=False, :hover=False, :focused=False

🟢 Label / Size=Large, Truncated=False, :hover=True, :focused=False

🟢 Label / Size=Large, Truncated=False, :hover=True, :focused=False

🟢 Label / Size=Large, Truncated=False, :hover=False, :focused=True

🟢 Label / Size=Large, Truncated=False, :hover=False, :focused=True

 

Truncation

Max-width of small labels is 100px and large labels is 200px. A tooltip with full name is shown on hover.

🟢 Label / Size=Small, Truncated=True, :hover=False, :focused=False

🟢 Label / Size=Small, Truncated=True, :hover=False, :focused=False

🟢 Label / Size=Small, Truncated=True, :hover=True, :focused=False

🟢 Label / Size=Small, Truncated=True, :hover=True, :focused=False

🟢 Label / Size=Small, Truncated=True, :hover=False, :focused=True

🟢 Label / Size=Small, Truncated=True, :hover=False, :focused=True

🟢 Label / Size=Large, Truncated=True, :hover=False, :focused=False

🟢 Label / Size=Large, Truncated=True, :hover=False, :focused=False

🟢 Label / Size=Large, Truncated=True, :hover=True, :focused=False

🟢 Label / Size=Large, Truncated=True, :hover=True, :focused=False

🟢 Label / Size=Large, Truncated=True, :hover=True, :focused=True

🟢 Label / Size=Large, Truncated=True, :hover=True, :focused=True

 

Label overflow

  • Labels in overflow are displayed within a popover on hover.
  • Labels with long names that are normally truncated by default are not truncated when displayed in the overflow popover. Maximum width of the popover is 250px. Labels wrap vertically within the popover when there are more than 2.
🟢 Label Overflow / Size=Large, :hover=False, :focused=False
🟢 Label Overflow / Size=Large, :hover=True, :focused=False

 

Label buttons

🟢 Label Button / Type=Add, :hover=False, :active=False, :focus=False

🟢 Label Button / Type=Add, :hover=False, :active=False, :focus=False

🟢 Label Button / Type=Add, :hover=True, :active=False, :focus=False

🟢 Label Button / Type=Add, :hover=True, :active=False, :focus=False

🟢 Label Button / Type=Add, :hover=True, :active=False, :focus=True

🟢 Label Button / Type=Add, :hover=True, :active=False, :focus=True

🟢 Label Button / Type=Add, :hover=False, :active=True, :focus=False

🟢 Label Button / Type=Add, :hover=False, :active=True, :focus=False

🟢 Label Button / Type=Add, :hover=False, :active=True, :focus=True

🟢 Label Button / Type=Add, :hover=False, :active=True, :focus=True

🟢 Label Button / Type=Edit, :hover=False, :active=False, :focus=False

🟢 Label Button / Type=Edit, :hover=False, :active=False, :focus=False

🟢 Label Button / Type=Edit, :hover=True, :active=False, :focus=False

🟢 Label Button / Type=Edit, :hover=True, :active=False, :focus=False

🟢 Label Button / Type=Edit, :hover=True, :active=False, :focus=True

🟢 Label Button / Type=Edit, :hover=True, :active=False, :focus=True

🟢 Label Button / Type=Edit, :hover=False, :active=True, :focus=False

🟢 Label Button / Type=Edit, :hover=False, :active=True, :focus=False

🟢 Label Button / Type=Edit, :hover=False, :active=True, :focus=True

🟢 Label Button / Type=Edit, :hover=False, :active=True, :focus=True

Guidelines

Use cases

Labels are currently only used with campaigns. In a recent study conducted on reusable content, there was appetite for bringing labels elsewhere in the product, like Journeys, Templates, and Snippets.

  • Categorizing campaigns quick identification—such as "Newsletter" or "Promotional"
  • Displaying metadata, such as keywords, attributes, or properties, associated with content

 

Empty state

If there are no applied labels (or “labels”) for the applicable resource, show just the “Add Label” Button.

 

Displaying applied labels

  • Show the first 3 labels, with all remaining labels listed within a Label Overflow.
  • When Labels can be edited, the Label Edit Button is shown when hovering over the labels. The Edit button enables inline editing.

 

Inline editing

The container becomes focused and all applied labels are shown with the Remove icon visible. Autocomplete label suggestions appear as Marketer types.

 

 

  • When designing for campaign selection or filtering, consider how labels may be used as a way to categorize campaigns and access a subset of them quickly
  • Do not overuse Labels in a single view, as this can lead to visual noise and confusion
  • Do not modify the design or colors of the existing Labels component. This includes adding borders, changing background colors, or applying shadows.

 

Content

Since the content and title of the labels is defined by the marketer, content is not strictly enforced. That said, there is a max-width to the Labels (small: 100px and large: 200px)

  • Icons should be avoided in Labels, unless it is used as a button to add or edit the tag group
  • For removable Labels, the dismiss button should be clearly visible on hover or focus but not detract from the tag's readability

 

Accessibility

  • Keyboard Navigation: Ensure Labels are navigable using the keyboard, especially selectable and removable Labels
  • Screen Reader Support: Use appropriate ARIA roles and labels to ensure Labels are correctly announced by screen readers, including state and purpose
  • Contrast and Colors: Adhere to WCAG guidelines for text and background contrast to ensure legibility for users with visual impairments
  • Focus Indicators: Implement clear focus indicators for Labels to assist users who rely on keyboard navigation

 

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Healthy