Badge

Badges highlight new functionality or features for the user, just like a notification would.

Example

Badge are mostly used for notifications in different organisms like avatar or menu. It can also be a link.

7
75
75+
<div class="nj-badge nj-badge--blue-corporate">7</div>
<div class="nj-badge nj-badge--blue-corporate">75</div>
<div class="nj-badge nj-badge--blue-corporate">75+</div>

Size Variation

75
75
<div class="nj-badge nj-badge--blue-corporate">75</div>
<div class="nj-badge nj-badge--blue-corporate nj-badge--lg">75</div>

Color Variation

75
75
75
75
75
75
75
75
75
75
75
75
75
75
75
75
75
75
<div class="d-flex flex-wrap">
  <div class="nj-badge nj-badge--white">75</div>
  <div class="nj-badge nj-badge--blue-corporate">75</div>
  <div class="nj-badge nj-badge--blue-allports">75</div>
  <div class="nj-badge nj-badge--blue-venice">75</div>
  <div class="nj-badge nj-badge--green-java">75</div>
  <div class="nj-badge nj-badge--green-pine">75</div>
  <div class="nj-badge nj-badge--green">75</div>
  <div class="nj-badge nj-badge--orange">75</div>
  <div class="nj-badge nj-badge--red">75</div>
  <div class="nj-badge nj-badge--blue-bigstone">75</div>
  <div class="nj-badge nj-badge--blue-rhino">75</div>
  <div class="nj-badge nj-badge--green-fun">75</div>
  <div class="nj-badge nj-badge--green-riogrande">75</div>
  <div class="nj-badge nj-badge--yellow">75</div>
  <div class="nj-badge nj-badge--purple">75</div>
  <div class="nj-badge nj-badge--violet">75</div>
  <div class="nj-badge nj-badge--violet-eggplant">75</div>
  <div class="nj-badge nj-badge--cerise">75</div>
</div>

Usage

Alert is an information notification related to the user’s recent activity on the interface. It should be a title with an explanatory message (to warn the user about an error or to notify a successful action) that requests feedback from the user.

Alert component usage

Best practices

Do / Don’t

alt test

In case of a comparison, order the bars in an ascending or descending order to provide more meaning to your charts.

alt test

test

alt test

In case of a comparison, order the bars in an ascending or descending order to provide more meaning to your charts.

alt test

test