Badges

Badges usage

Badges can notify you that there are new or alert messages or notifications. Add one of predefined classes ( new , alert , neutral) to the badge to give it the look. They are right-positioned by default, but you can add class static to reset this positioning. Useful for Collections, Dropdowns, Navbars or Collapsibles.

	<!-- Collection -->
	<div class="collection">
		<a href="#!" class="collection-item">Alan<span class="badge">1</span></a>
        <!-- Static position -->
		<a href="#!" class="collection-item">Alan<span class="new badge static">4</span></a>
		<a href="#!" class="collection-item">Alan<span class="neutral badge">8</span></a>
		<a href="#!" class="collection-item">Alan<span class="alert badge">-1</span></a>
	</div>
	
	<!-- Dropdown -->
	<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>
        

	<!-- Navbar -->
	<nav>
		<div class="nav-wrapper">
			<a href="!#" class="title">Title</a>
			<ul class="right hide-on-med-and-down">
				<li><a href="">item <span class="new badge">4</span></a></li>
				<li><a href="">item</a></li>
				<li><a href="">item</a></li>
			</ul>
		</div>
    </nav>
        

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

Custom Captions & Colors

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

	<!-- Custom Captions sample -->
	<div class="collection">
		<a href="#!" class="collection-item">
            Collection item<span class="new badge" data-badge-caption="custom caption">4</span>
        </a>
        <a href="#!" class="collection-item">
            Collection item<span class="badge" data-badge-caption="custom caption">4</span>
        </a>
	</div>
        

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

	<!-- Custom Colors sample -->
	<div class="collection">
		<a href="#!" class="collection-item">
            Collection item<span class="new badge pink" data-badge-caption="pink">4</span>
        </a>
        <a href="#!" class="collection-item">
            Collection item<span class="new badge purple lighten-4 black-text" data-badge-caption="purple lighten-4">4</span>
        </a>
	</div>
        

For more detailed informations please visit: http://materializecss.com/badges.html