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.
When to use numeric badges
We present numeric badges in lists, tables, or navigation elements to indicate the number of new, unaddressed, or available items.
For example, numeric 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 numeric 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 numeric 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+”.
Numeric 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
