Badge

A badge is a label or decorative indicator used to communicate information within the UI in a highly visual way. We categorize badges into three types: those that communicate the status of a piece of content, those that provide non-actionable information, and special cases that have been designed for a specific issue.

Component checklist

Design

Up to date

React

Up to date

Types

Types - Preview
  1. Status
    Use this badge when you need to represent status of a process, message or other type of item in the application. Items with status can also change over time.
  2. Non-actionable
    Use this type of badges wherever we need to show on an item for example its origin, or any other information that does not belong to the status category.
  3. Special
    Special badges have been designed for a specific problems, for example, to designate priority levels, customer sentiment, and other product-related information.

 

Status

Status badge is used when we need to show some status of a process, message or other type of item in the application. Items with status can also change over time.

The badge has six visual options to identify the main purpose.

Types - Status
  1. Active
    It is used to indicate the active state that is currently running or active.
  2. Common
    You probably want to use this one unless you fall into a specific use case.
  3. Incomplete
    Use to indicate when a given task has not yet been completed. For example, when the user has scheduled a post or moved the item state to In progress.
  4. Danger
    It is a state where we want to say something's wrong.
  5. Success
    Use to indicate a successful, completed, or desirable state when it’s important to provide a positive message to the user.
  6. Newly added
    This is an indication of new things coming into the app e.g. new posts, new comments in the list, etc...

 

Non-actionable

The Non-actionable badge displays information about the content below it. It is focused more on content than status. We do not use leading icons for information badges in any case. The only customization that is allowed here is that we can use color on the badge text. This combination must pass the contrast checker.

Types - Non-actionable

 

Special

A specially created set of badges that have been specifically designed for a specific problem, for example, to designate priority levels, customer sentiment, and other product-related information.

Types - Special

 

Sizes

Soul defines two sizes of the badge, small as a default size and medium for a case badge needs to be more prominent. In order to choose the right one, consider the context of the situation.

Size

 

Usage

Inline

This type of badge placement can be found, for example, on widgets, posts in the content feed or inspiration, content in the community and all kinds of other cards that have more than one badge on them. When placed side by side, we select a specific order based on the priority of badges.

Usage - In line
  1. Icon only
  2. Status
  3. Special
  4. Informative

 

Header

Use badges in combination with headers that require additional information, for example, in panels, modals, etc.

Usage - In header

 

Table

In a table, always align the badge to the left for better readability when visually scanning the page. It is allowed to have only one badge per row. See more about how to align elements in the table.

Usage - In table