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.

If you need a link, check the tag component.

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>

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