Badge

Badges are used to inform the status of an item or an action that's been taken

Design

Badge

Healthy
Show details
Healthy
Published: May 22, 2023
Updated: March 20, 2024

 

Variants

Neutral

Neutral

Neutral badges are used for general, non-status indicators

Info

Info

Positive

Positive

Positive badges should only use the success colors from the utility palette and should only be used to highlight positive data.

Warning

Warning

Warning badges should only use the warning colors from the utility palette and should only be used to highlight cautious data.

Negative

Negative

Negative badges should only use the alert colors from the utility palette and should only be used to highlight negative data.

 

 

Badge (counter)

A count badge denotes the number of items that a particular item has applied, for example in a filter button where multiple filters have been applied.

Neutral

Neutral

Used to indicate a count while remaining visibly neutral in the interface. Can be used in places like Tabs or Action menus, where the item that includes the count is not actively selected.

Default

Default

Used to indicate a count with more visual prominence in the interface. This is commonly used when the active Tab or Menu item has a counter appended.

Error

Error

Used to indicate a count of errors. Should be used sparingly as error count can be unpredictable and adds unnecessary cognitive load to the user.

 

Badge (beta)

New features or products that are in beta are indicated using a Beta badge. This can be displayed next to where the Beta feature is mentioned—such as a menu item or a modal heading.

🟢 Beta

🟢 Beta

 

Badge (Boss)

A badge that indicates Boss-only actions—or actions that are only visible to internal Iterable team members for troubleshooting or administrative purposes.

🟢 Boss

🟢 Boss

 

Badge (AI)

Areas of the platform related to Iterable’s AI products may include this badge to help provide additional context to the user of the data’s source or methodologies.

🟢 AI Badge

🟢 AI Badge

 

 

Badge (status)

🟢 Status Badge / variant=Aborted

🟢 Status Badge / variant=Aborted

🟢 Status Badge / variant=Scheduled

🟢 Status Badge / variant=Scheduled

🟢 Status Badge / variant=Advanced

🟢 Status Badge / variant=Advanced

🟢 Status Badge / variant=Recurring

🟢 Status Badge / variant=Recurring

🟢 Status Badge / variant=Running

🟢 Status Badge / variant=Running

🟢 Status Badge / variant=Ready

🟢 Status Badge / variant=Ready

🟢 Status Badge / variant=Draft

🟢 Status Badge / variant=Draft

🟢 Status Badge / variant=Finished

🟢 Status Badge / variant=Finished

 

 

Guidelines

Use cases

Badges are used to add a singular label to a page or resource. If a page or resource could have multiple badges applied, consider using labels instead.

 

Badges can be used to display a mutually exclusive property value.

For example:

  • A campaign can have one of multiple statuses, which can be represented by color coded badges
  • A workflow webhook can have one have multiple methods, which can be represented by neutral badges
  • Use color for non-status cases sparingly, to avoid conflating meaning with established status badge colors.
  • A badge next to a page title can indicate that the feature is new or in beta

 

 

Content

  • Badge contents should be concise. Limit contents to a single word when possible.
  • Badges may contain an icon

 

Accessibility

  • Implement badges alongside individual elements or labels to clearly indicate the item being measured, eliminating confusion.
  • Ensure that meaning is not conveyed solely through color to accommodate users who may not distinguish colors traditionally, indicating positive or negative values through additional methods.

 

Health

Badge (default)

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

 

Badge (AI)

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

 

Badge (Beta)

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

 

Badge (Boss)

Component checklist

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

 

Badge (Counter)

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

 

Badge (Status)

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