Bullet

A bullet is primarly used to help draw attention to new or updated information. For example, it can help in notifying the user of a status.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Example

The default form of a bullet.

<div class="d-flex flex-wrap" style="gap: 8px">
  <div class="nj-bullet nj-bullet--sm nj-bullet--primary"></div>
  <div class="nj-bullet nj-bullet--primary"></div>
</div>

Color variations

Fluid Design System includes several predefined colors. The React and Angular bullet components accept a custom colors prop as well.

<div class="d-flex flex-wrap" style="gap: 8px">
  <div class="nj-bullet nj-bullet--primary"></div>
  <div class="nj-bullet nj-bullet--white"></div>
  <div class="nj-bullet nj-bullet--blue-corporate"></div>
  <div class="nj-bullet nj-bullet--blue-allports"></div>
  <div class="nj-bullet nj-bullet--blue-venice"></div>
  <div class="nj-bullet nj-bullet--green-java"></div>
  <div class="nj-bullet nj-bullet--green-pine"></div>
  <div class="nj-bullet nj-bullet--green"></div>
  <div class="nj-bullet nj-bullet--orange-crusta"></div>
  <div class="nj-bullet nj-bullet--orange"></div>
  <div class="nj-bullet nj-bullet--red-mandy"></div>
  <div class="nj-bullet nj-bullet--red"></div>
  <div class="nj-bullet nj-bullet--blue-bigstone"></div>
  <div class="nj-bullet nj-bullet--blue-rhino"></div>
  <div class="nj-bullet nj-bullet--green-fun"></div>
  <div class="nj-bullet nj-bullet--green-riogrande"></div>
  <div class="nj-bullet nj-bullet--yellow"></div>
  <div class="nj-bullet nj-bullet--yellow-bright-sun"></div>
  <div class="nj-bullet nj-bullet--purple"></div>
  <div class="nj-bullet nj-bullet--violet"></div>
  <div class="nj-bullet nj-bullet--violet-eggplant"></div>
  <div class="nj-bullet nj-bullet--cerise"></div>
</div>

Size variation

There are 2 sizes that you can specify with a modifier class.

  • md: 16px (default)
  • sm: 12px
<div class="d-flex flex-wrap" style="gap: 8px">
  <div class="nj-bullet nj-bullet--sm nj-bullet--primary"></div>
  <div class="nj-bullet nj-bullet nj-bullet--primary"></div>
</div>