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.
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)
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.
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.
Do
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
Don't
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