To help certain key numbers stand out, we present them in badges. They look like buttons, but users can’t select them. They just 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 keep things less complicated for customers, use numerical badges sparingly. Example: to let customers know the number of new or available items in a list.
Appearance and behavior
Badges can be 2 digits only. Once you reach 100 or anything higher than that, the label becomes “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
