Indicators

Badge

Added in the latest release

A badge is a visual indicator for numeric values such as tallies and scores. Badges are usually placed before or after the label of the thing they’re quantifying, also appended to the top or bottom of an icon.

  • Neutral: use as the default badge
  • Primary: use to draw attention to new or updated information
  • Inverted: utilize a primary inverted badge when high contrast against a darker background color is needed.
  • Important: use an important badge for information that needs to stand out. For example, notifications in confluence.
  • Dark: this badge is used when you need higher contrast than the neutral badge.
  • Success: use this badge to communicate success.

height: 64px;

width: 49px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 49px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 56px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 49px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 49px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 49px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Badge sizes

height: 64px;

width: 58px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 58px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 58px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 58px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 58px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Badge with border

height: 49px;

width: 51px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 34px;

width: 34px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Badge positions

height: 64px;

width: 185px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 72px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 64px;

width: 72px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Loader

height: 20px;

width: 40px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

height: 20px;

width: 40px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

Spinner

height: 39px;

width: 39px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

height: 39px;

width: 39px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

height: 39px;

width: 39px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: ;

Progress Bar

height: 8px;

width: 315px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Label left

height: 32px;

width: 277px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Label right

height: 32px;

width: 277px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Drop us a line

helloux@microfocus.com

ยฉ Copyright 2021 Micro Focus or one of its affiliates

Contributeย  |ย  Updates