Dealogic Styleguide

section menu

Notification Badge

Notification Badges are labels which hold small amounts of information.

  • Count Badge provides users information regarding the total number of items or total number of items that are unresolved & require action.

Examples

Count Notification Badge

This is a count notification badge.

1 12 123 1234 9999+ 9999+ 
<span class="dl-badge count">1</span>
<span class="dl-badge count">12</span>
<span class="dl-badge count">123</span>
<span class="dl-badge count">1234</span>
<span class="dl-badge count">9999+</span>
<span class="selected">
  <span class="dl-badge count">9999+</span>
</span>

State Notification Badge

This is a state notification with icon and data badge.

9 14 % 9 14 % 9 14 %
<span class="dl-badge icon positive"><dl-icon name="arrow-arrow-up"></dl-icon>9</span>
<span class="dl-badge icon positive"><dl-icon name="arrow-arrow-up"></dl-icon>14 %</span>
<span class="dl-badge icon negative"><dl-icon name="arrow-arrow-down"></dl-icon>9</span>
<span class="dl-badge icon negative"><dl-icon name="arrow-arrow-down"></dl-icon>14 %</span>

<span class="dl-badge icon positive"><dl-icon name="action-check-circle-filled"></dl-icon>9</span>
<span class="dl-badge icon positive"><dl-icon name="action-check-circle-filled"></dl-icon>14 %</span>