menu

Badges can notify you that there are new or unread messages or notifications. Add the new class to the badge to give it the background.

Collections

              Copied!
              content_copy
              
  <div class="collection">
    <a href="#!" class="collection-item"><span class="badge">1</span>Alan</a>
    <a href="#!" class="collection-item"><span class="new badge">4</span>Alan</a>
    <a href="#!" class="collection-item">Alan</a>
    <a href="#!" class="collection-item"><span class="badge">14</span>Alan</a>
  </div>
              
            

Badges in Collapsibles

  • filter_dramaFirst4

    Lorem ipsum dolor sit amet.

  • placeSecond1

    Lorem ipsum dolor sit amet.



<ul class="collapsible">
  <li>
    <div class="collapsible-header">
      <i class="material-icons">filter_drama</i>
      First
      <span class="new badge">4</span></div>
    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
  </li>
  <li>
    <div class="collapsible-header">
      <i class="material-icons">place</i>
      Second
      <span class="badge">1</span></div>
    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
  </li>
</ul>

Options

You can customize captions in many ways.

Custom Caption

You can explicitly set the caption in a badge using the data-badge-caption attribute.


  <span class="new badge" data-badge-caption="custom caption">4</span>
  <span class="badge" data-badge-caption="custom caption">4</span>
            
Colors

You can use our color classes to set the background-color of the badge.


  <span class="new badge red">4</span>
  <span class="new badge blue">4</span>