Component checklist

Types

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

Status

A status badge is used when we need to show the 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.

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. In any case, we do not use leading icons for information badges. The only customization allowed here is color on the badge text. This combination must pass the contrast checker.

Special

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

Sizes

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

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.

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.

Table

Always align the badge to the left in a table for better readability when visually scanning the page. Only one badge is allowed per row. See more about how to align elements in the table.