Badges

Badges are small containers with numeric values placed adjacent to a UI element. Badges indicate a running tally or count of a specific type of content, for example systems with risks number of volumes or number of drives.

Basic Badge

The basic badge includes a count of a specific item, up to three digits. The badge is not interactive nor does it convey status.

3 42 873 999+
Copied to clipboard
<span class="luci-badge"> 3 </span>
<span class="luci-badge"> 42 </span>
<span class="luci-badge"> 873 </span>
<span class="luci-badge"> 999+ </span>

Light Variation

Use the light version when the badge is a non-essential element on the screen and should recede from the primary content.

3 42 873 999+
Copied to clipboard
<span class="luci-badge luci-badge--light"> 3 </span>
<span class="luci-badge luci-badge--light"> 42 </span>
<span class="luci-badge luci-badge--light"> 873 </span>
<span class="luci-badge luci-badge--light"> 999+ </span>

Do’s and Don’ts

Do

  • Use badges in conjunction with a single UI item so that there is no ambiguity around which item is indicated.
  • Use numeric values only.
  • Use up to 3 digits.

Don’t

  • Do not use green to reflect normal counts.
  • Do not use or add text to the badge. If you need to add text, use a tag component instead.

Badges Reflecting Status

Important or Warning Status

The badge inherits the LUCI warning notification color when it is intended to convey a warning status within a user interface.

3 42 873 999+
Copied to clipboard
<span class="luci-badge luci-badge--warning"> 3 </span>
<span class="luci-badge luci-badge--warning"> 42 </span>
<span class="luci-badge luci-badge--warning"> 873 </span>
<span class="luci-badge luci-badge--warning"> 999+ </span>

Error or Critical Issue Status

3 42 873 999+
Copied to clipboard
<span class="luci-badge luci-badge--error"> 3 </span>
<span class="luci-badge luci-badge--error"> 42 </span>
<span class="luci-badge luci-badge--error"> 873 </span>
<span class="luci-badge luci-badge--error"> 999+ </span>

Badge Values

Badges only contain numeric values up to three digits. If your count exceeds three digits, first reconsider whether a badge is the appropriate interface element to use. For example, is this number still meaningful at this level or could the count be better represented in a different way? If a count exceeds three digits and it is an appropriate and useful data point, the component allows for the addition of a plus sign “plus” to ensure users are aware that it represents more than the displayed number.

999+ 999+ 999+ 999+
Copied to clipboard
<span class="luci-badge"> 999+ </span>
<span class="luci-badge luci-badge--light"> 999+ </span>
<span class="luci-badge luci-badge--warning"> 999+ </span>
<span class="luci-badge luci-badge--error"> 999+ </span>

Badge Placement

Place badges directly adjacent to the related UI item. See examples below for appropriate applications:

Badges on Dark Backgrounds

Badges are designed to work on light, white and dark backgrounds.

999+ 999+ 999+ 999+
Copied to clipboard
<span class="luci-badge"> 999+ </span>
<span class="luci-badge luci-badge--light"> 999+ </span>
<span class="luci-badge luci-badge--warning"> 999+ </span>
<span class="luci-badge luci-badge--error"> 999+ </span>

Class Reference

Class Applies to Outcome

.luci-badge--light

.luci-badge

Adds light styling.

.luci-badge--warning

.luci-badge

Adds warning styling.

.luci-badge--error

.luci-badge

Adds error styling.