Foundation
Home

Button with Notification Badge

By Christine Siu

F6

badge notification button icon alert

How do I use This?

A long button with icon and notification badge.

HTML

<a href="#" class="button button-icon-badge">
  <i class="fa fa-envelope"></i>
  <span class="button-icon-badge-text">Emails</span>
  <span class="badge success">1</span>
</a>

.button-icon-badge {
  padding: 1rem 2rem;

  .button-icon-badge-text {
    padding: 0 0.5rem;
  }

  .badge {
    font-size: 0.8em;
    padding: 0.4rem;
  }

  .fa {
    color: $white;
    font-size: 1rem;
  }
}

.button-icon-badge {
  padding: 1rem 2rem;
}

.button-icon-badge .button-icon-badge-text {
  padding: 0 0.5rem;
}

.button-icon-badge .badge {
  font-size: 0.8em;
  padding: 0.4rem;
}

.button-icon-badge .fa {
  color: #fefefe;
  font-size: 1rem;
}

JS