Badge

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

React

Angular

Example

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

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

<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

<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.

Best practices

An alert must not interrupt the user journey, you have to always put a close button

Tell to the user how to fix the problem if its possible

In your artboards, include all interactive states that are applicable :\ Sucess, danger, warning, information

Do / Don’t

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

test

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

test

Avatar

Breadcrumb