Contact LUCI

LUCI

 Version 2.6.0

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’s

  • 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’ts

  • Use Green to reflect normal counts.
  • 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 3 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 counts exceed three digits and it’s an appropriate and useful data point, the component allows for the addition of a plus sign "+" 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

The badges were 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.

© 2018 NetApp

Use of the information provided herein is permitted solely for the purpose of developing a NetApp-branded website, which may not imply an affiliation with NetApp that does not exist. NetApp, Inc. reserves the right to update or remove the information on this website at its sole discretion without prior notice. NetApp makes no representations, guarantees or warranties of any kind, express or implied, with respect to the information contained herein for any purpose. NetApp shall not be held liable for any loss, damage or technical errors claimed as a result from use of this site, including without limitation, any fault, error, omission, interruption or delay. Any use of the information contained herein is strictly at your own risk.

We've made substantial design, code, and architectural improvements with LUCI 2.0. However, if you still need to reference original assets you can do so at the LUCI 1.0 archive.
View the archive