Design
Component checklist
Up to date
React
Up to date
Types
- 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.
- 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.
- 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.
- Active –– It is used to indicate the active state that is currently running or active.
- Common –– You probably want to use this one unless you fall into a specific use case.
- 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.
- Danger –– It is a state where we want to say something's wrong.
- Success –– Use to indicate a successful, completed, or desirable state when it’s important to provide a positive message to the user.
- Newly added –– This is an indication of new things coming into the app e.g. new posts, new comments in the list, etc...
An example of case coming into care:
- the case arrives = status Newly added
- an agent is working on it = status Incomplete
- an error appeares in case = status Danger
- the case is finished = status Done
- the case arrives = status Newly added
- an agent is working on it = status Incomplete
- an error appeares in case = status Danger
- the case is finished = status Done
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.
Difference between Status and Non-actionable
Status badges represent status or progress, e.g. active or error. Non-actionable badges refer to a kind of content, e.g. the given widget shows statistics from the Community = widget has a "Community" badge.
Status badges represent status or progress, e.g. active or error. Non-actionable badges refer to a kind of content, e.g. the given widget shows statistics from the Community = widget has a "Community" badge.
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.
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.
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.
- Icon only
- Status
- Special
- Informative
Header
Use badges in combination with headers that require additional information, for example, in panels, modals, etc.
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.
