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