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 or tables or navigation elements to indicate the number of new, unaddressed, or available items.

For example, we can use numerical badges to indicate:

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, only when they might be useful to let the user know the number of new or available items in a list.

Appearance and behavior

These badges accommodate up to two- or three-digit numbers at a maximum. Once we reach this limit, 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+”.

Numerical badge (standard badge on a light background)
15 px height, 20 px width minimum, 10 px radius, background #486C8F, label text 12 px

Less than 10 / Less than 100 / More than 100 results

Numerical badge (standard badge on a dark background)
15 px height, 20 px width minimum, 10 px radius, background #193048, label text 12 px

Less than 10 / Less than 100 / More than 100 results

  • Was this Helpful?
  •