Badges are non-interactive, visual indicators used to capture the user’s attention.
When to Use
Numerical Badges can accompany lists or navigation elements to indicate the number of new, unaddressed, or available items. For example, Numerical Badges may be used to indicate:
- the number of items in each category grouping in the Add Drawer
- the number of error messages in the Asynchronous Errors message style
- the number of items available in the Trowser Browser
Numerical Badges should be used for lists with a minimal number of items… not for potentially infinite lists like the Activity Feed. To avoid adding complexity to the user experience, Numerical Badges should be used sparingly and only when it may be useful to the user to know the number of new or available items in a list.
Status Badges can be used to indicate status or items that may require the user’s attention. For example, Status Badges may be used to indicate:
Status badges are also used within Confirmations, Warnings, and Errors, each with a strong meaning. Status badges should be used consistently and only when the users’ attention is required, so that we don’t dilute their meanings.
Appearance & Behavior
Numerical Badges only accommodate up to two- or three-digit numbers at a maximum. Once this limit has been reached, the label indicates more items are available without specifying the exact quantity. For example, with a three-digit limit, 1,200 items are indicated by the label “999+”.
Status Badges adopt a teardrop shape when pointing to a transaction or dollar amount that requires attention (example: an overdue invoice). It may also be accompanied by a brief text label, such as “Overdue” or “Paid”.
The text Status Badges call attention on the items with very specific status (for example, new feature badge). By default, place the badges on the right side of the content. In a table, you can place the badges on the left side if it deserves more attention. The Pending badge must be used in conjunction with the Confirmation badge.