Metronic customizes the
										
Bootstrap Badges   through the SASS variables in
										
src/sass/components/_variables.scssand adds additonal options in
										
src/sass/components/_badge.
 
									
									
									
										
										
										 
										
										
										Use
										.badgewith
										.badge-{color}classes to set a badge's style defined with
										$theme-colorsmapped in
										src/sass/components/_variables.scss:
										
										
										
											
												New 
												New 
												New 
												New 
												New 
												New 
												New 
												New 
												New 
											
										 
										
										
										
											
											
												copy 
												
													
<span class="badge badge-white">New</span>
<span class="badge badge-primary">New</span>
<span class="badge badge-light">New</span>
<span class="badge badge-secondary">New</span>
<span class="badge badge-success">New</span>
<span class="badge badge-info">New</span>
<span class="badge badge-warning">New</span>
<span class="badge badge-danger">New</span>
<span class="badge badge-dark">New</span>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use
										.badgewith
										.badge-light-{color}classes to set a badge's light style defined with
										$theme-light-colorsmapped in
										src/sass/components/_variables.scss:
										
										
										
										
										
										
											
											
												copy 
												
													
<span class="badge badge-light-primary">New</span>
<span class="badge badge-light-success">New</span>
<span class="badge badge-light-info">New</span>
<span class="badge badge-light-warning">New</span>
<span class="badge badge-light-danger">New</span>
<span class="badge badge-light-dark">New</span>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use
										.badge-squareclass to use a badge with same width and height:
										
										
										
										
										
										
											
											
												copy 
												
													
<span class="badge badge-square badge-white">5</span>
<span class="badge badge-square badge-primary">5</span>
<span class="badge badge-square badge-light">5</span>
<span class="badge badge-square badge-secondary">5</span>
<span class="badge badge-square badge-success">5</span>
<span class="badge badge-square badge-info">5</span>
<span class="badge badge-square badge-warning">5</span>
<span class="badge badge-square badge-danger">5</span>
<span class="badge badge-square badge-dark">5</span>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use
										.badge-circleclass to use a badge with circle style:
										
										
										
										
										
										
											
											
												copy 
												
													
<span class="badge badge-circle badge-white">5</span>
<span class="badge badge-circle badge-primary">5</span>
<span class="badge badge-circle badge-light">5</span>
<span class="badge badge-circle badge-secondary">5</span>
<span class="badge badge-circle badge-success">5</span>
<span class="badge badge-circle badge-info">5</span>
<span class="badge badge-circle badge-warning">5</span>
<span class="badge badge-circle badge-danger">5</span>
<span class="badge badge-circle badge-dark">5</span>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use
										.badge-smor
										.badge-lgto change Badge size according to the Bootstrap standards:
										
										
										
										
										
										
											
											
												copy 
												
													
<span class="badge badge-primary badge-sm">New</span>
<span class="badge badge-primary badge-circle badge-sm">3</span>
<span class="badge badge-primary badge-square badge-sm">4</span>
<span class="badge badge-primary badge">New</span>
<span class="badge badge-primary badge-circle">3</span>
<span class="badge badge-primary badge-square ">4</span>
<span class="badge badge-primary badge-lg">New</span>
<span class="badge badge-primary badge-circle badge-lg">3</span>
<span class="badge badge-primary badge-square badge-lg">4</span>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										
										
										Use a badge with
										.badge-circleclass in a Bootstrap Button element:
										
										
										
											
												Button
												5  
												Button
												5  
												Button
												5  
												Button
												5  
											
										 
										
										
										
											
											
												copy 
												
													
<button class="btn btn-primary position-relative me-5">
    Button <span class="position-absolute top-0 start-0 translate-middle  badge badge-circle badge-danger">5</span>
</button>
<button class="btn btn-success position-relative me-5">
    Button <span class="position-absolute top-100 start-0 translate-middle  badge badge-circle badge-warning">5</span>
</button>
<button class="btn btn-danger position-relative me-5">
    Button <span class="position-absolute top-0 start-100 translate-middle  badge badge-circle badge-primary">5</span>
</button>
<button class="btn btn-warning position-relative">
    Button <span class="position-absolute top-100 start-100 translate-middle  badge badge-circle badge-success">5</span>
</button>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										
										
										Use a badge with
										.badge-circleclasses inside button:
										
										
										
											
												Notifications
												5  
												Messages
												4  
												Orders
												7  
												Profile
												3  
											
										 
										
										
										
											
											
												copy 
												
													
<button class="btn btn-primary me-5">
    Notifications <span class="badge badge-circle badge-warning ms-2">5</span>
</button>
<button class="btn btn-success me-5">
    Messages <span class="badge badge-circle badge-danger ms-2">4</span>
</button>
<button class="btn btn-danger me-5">
    Orders <span class="badge badge-circle badge-primary ms-2">4</span>
</button>
<button class="btn btn-danger me-5">
    Profile <span class="badge badge-circle badge-white ms-2">3</span>
</button>