Badges

Badges are non-interactive, visual indicators used to capture the user’s attention.

Web

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:

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:

  • an overdue or paid amount
  • an overdue or paid transaction
  • an incomplete item in a List or Table

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

NumericalBadges

Numerical Badges on a Light Background

NumericalBadgesDk

Numerical Badges on a Dark Background

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

When communicating status within a Table or List, Status Badges are minimal bars to the left that draw attention while not overpowering the associated content.

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”.

badges_dia_status-badges-with-label

Status Badge / Status Badge with label

badges_dia_status-badges-in-invoice

Example of a badge pointing to an invoice number

The round Status Badges are used in Confirmations, Warnings, and Errors.

badges_dia_status-badges-without-pointers

Information Icon / Error Icon / Warning or Alert Icon / Confirmation Icon

badges_dia_status-badges-activity-feed

Example of status badges in an activity feed

ConfirmationDialog

The same badge symbol is used for confirmation dialogs

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.

different text badges: info / error / warning / confirmation / pending

info / error / warning / confirmation / pending

Example of an info text status badge / Example of a table with a pending badge paired with a confirmation badge

© Intuit 2016 | Terms of use