Badge is a new feature in user interfaces, and provides users with a visual clue to help them discover additional relevant content. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are.

Bootstrap Badge Notification Badge Chips Configuration Options

Bootstrap Badge

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

Badge can also be used inside other elements, such as buttons.

code 

							

							

								

							

						

					
 
					
					
					
 
						
 
							

								
 
									 
									1 
									
									 
									2 
									
									 
									4 
									
									 
									6 
									
									 
									8 
									
									 
									10 

							

						

						
						
 
							

								
 
									 
									
									
									
									
									
									
									
									
								

							

						

					
 
					
				
 
			

		
 
		
		
		

			
			
			

				

					
Notification Badge

				

				
You can also create a badge which overlaps any element. Create the notification badge using .pmd-badge .pmd-badge-overlap.

			
 
			
			
 
				
				
				

					
					
					
 
						code 
					
  
					
					
					

						

							

							
						

						

							

								

							

							

								

							

						

					
 
					
					
					
 
						
 
							

								

									

										
 
											
											

												
account_box

											

										

										
 
											
											

												
Inbox

											

										

									

								

							

						

					
 
					
				
 
			

		
 
		 
		
		

			
			
			

				

					
Chip

				

				
Chip component is a small, interactive element. Chip is commonly used for contacts, text, rules, icons, and photos. To create a chip add .pmd-chip to the tag. To create chip that contain icons, add .pmd-chip-contact to the tag.

			
 
			
			
 
				
				
				

					
					
					
 
						code 
					
 
					
					
					

						

							

							
						

						

							

								

							

							

								

							

						

					
 
					
					
					
 
						
 
							

								

									

										
 
											
											

												

													Example Chip 
													close
												

											

										

										
 
											
											

												
 
													avatar 
													Trevor Hensen 
													
													close
												

											

										

									

								

							

						

					
 
					
				
 
			

		
 
		
				
		

			

				

					
Configuration Options

				

				
The Propeller CSS classes apply various predefined visual enhancements to the Badge. The table lists the available classes and their effects.

			

			
 
				

					
 
						

							
								

									Classes
									Effect
									Remark
								

							
							
								

									.pmd-badge
									Add this class to create notification badge.
									Optional
								

								

									.pmd-badge-overlap
									Add this class to create notification badge which overlaps the element.
									Optional
								

								

									.pmd-chip
									Add this class to create chips.
									Optional
								

								

									.pmd-chip-contact
									Add this class to create chips with an image/icon.
									Optional