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.

#### Badges in Collections

- View
- Html

You can use badges in any type of the Collection.

- Alan1
- Alan4
- Alan
- Alan14

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

#### Badges in Dropdown

- View
- Html

- one1
- two1
- three

Dropdownarrow_drop_down

      <ul id="dropdown2" class="dropdown-content">
        <li><a href="#!">one<span class="badge">1</span></a></li>
        <li><a href="#!">two<span class="new badge">1</span></a></li>
        <li><a href="#!">three</a></li>
      </ul>
      <a class="btn dropdown-trigger" href="#!" data-target="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a>

#### Badges in Collapsibles

- View
- Html

- filter_dramaFirst 4

  Lorem ipsum dolor sit amet.

- placeSecond 1

  Lorem ipsum dolor sit amet.

      <ul class="collapsible" data-collapsible="accordion">
        <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

- View
- Html

Custom Badge Captions4 Custom Badge Captions4

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

#### Colors

- View
- Html

Gradient with shadow4 Gradient4 Red4 Blue4

      <a href="#!" class="collection-item">Gradient with shadow<span class="new badge gradient-45deg-purple-deep-orange gradient-shadow" data-badge-caption="gradient purple orange">4 </span></a>
      <a href="#!" class="collection-item">Gradient<span class="new badge gradient-45deg-light-blue-cyan" data-badge-caption="gradient blue cyan">4</span></a>
      <span class="new badge red">4</span>
      <span class="new badge blue">4</span>