##### Badges

settings Settings arrow_drop_down

- Access1
- Profile2
- Notifications

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

You can use badges in any type of the Collection.

Alan1 Alan4 Alan Alan14

      <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 Dropdown

- 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-button" href="#!" data-activates="dropdown2">Dropdown<i class="material-icons right">arrow_drop_down</i></a>

Badges in Navbar

    <nav>
      <div class="nav-wrapper">
        <a href="" class="brand-logo">Logo</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="">sass</a></li>
          <li><a href="">sass <span class="new badge">4</span></a></li>
          <li><a href="">sass</a></li>
        </ul>
      </div>
    </nav>

Badges in Collapsibles

- 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

Custom Badge Captions4 Custom Badge Captions4

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

Gradient with shadow4 Gradient4 Red4 Blue4

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

    	<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>

add

- help_outline
- widgets
- today
- mail_outline