To help certain key numbers stand out, we present them in badges. They look a bit like buttons, but users can’t select them. They simply guide users to numbers they should pay attention to.
Usage
We present numerical badges in lists, tables, or navigation elements to indicate the number of new, unaddressed, or available items.
For example, numerical badges can indicate the number of:
-
Items in each category grouping in the add drawer.
-
Error messages in the asynchronous error message style.
-
Items available in a trowser.
We generally use numerical badges for lists with a relatively small number of items, not for potentially infinite lists like the activity feed. To avoid adding complexity to the user experience, use numerical badges sparingly. For instance, to let the user know the number of new or available items in a list.
Appearance and behavior
Badges can be two-digits at a maximum. For numbers larger than three digits, the label indicates more items are available without specifying the exact quantity. For example, 100 items are indicated by the label “99+”.
Numerical badge (standard badge on a light background)
16 px height, 16 px width minimum, 4 px radius,
background #6B6C72, label text 12 px
Less than 10 / Less than 100 / More than 100 results
