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

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.

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:

Capacity
Current Utilization 3
Forecasts
Health
Risks 12
Security Vulnerabilities
Best Practice Gaps 8
Service Contracts 2
Age 4
Errors/Faults

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.