Introduction

You have probably all seen notification badges somewhere, such as on smart phones or facebook.Badges can be very effective in alerting the user to new things on your site.

You can add the class .badge to any element you want

Notification badges

Notifications Notifications

Code :

    <!-- Notification without data -->      
<span class="badge">Notifications</span>  
    <!-- Notification with data -->      
<span class="badge" data-badge="8">Notifications</span>          
         

Button badges

Hello Hello

Code :

    <!-- Button without data -->      
<button class="btn badge">button</button>  
    <!-- Button with data -->      
<button class="btn badge" data-badge="8">button</button>          
         

SCSS

// ---------------------------------------------------------------
// This file contains all styles related to the Badge component.
// ---------------------------------------------------------------

.badge {
  position: relative;
  white-space: nowrap;
  &[data-badge]::after, &:not([data-badge])::after {
    background: #c23616;
    background-clip: padding-box;
    border-radius: .5rem;
    box-shadow: 0 0 0 .1rem #fff;
    color: #fff;
    content: attr(data-badge);
    display: inline-block;
    transform: translate(-0.05rem, -0.5rem);
  }
  &[data-badge]::after {
    font-size: .7rem;
    height: .9rem;
    line-height: 1;
    min-width: .9rem;
    padding: .1rem .2rem;
    text-align: center;
    white-space: nowrap;
  }
  &:not([data-badge])::after, &[data-badge=""]::after {
    height: 6px;
    min-width: 6px;
    padding: 0;
    width: 6px;
  }
  &.btn::after {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
  }
}