Metronic - Tailwind CSS Badge

A basic example of Tailwind CSS Badge component with various color variants.

Default Primary Success Info Danger Warning Dark

				
					<span class="badge">
 Default
</span>
<span class="badge badge-primary">
 Primary
</span>
<span class="badge badge-success">
 Success
</span>
<span class="badge badge-info">
 Info
</span>
<span class="badge badge-danger">
 Danger
</span>
<span class="badge badge-warning">
 Warning
</span>
<span class="badge badge-dark">
 Dark
</span>

Apply the custom class


         .badge-outline

to set badges an outline style.

Preview HTML

Default Primary Success Info Danger Warning Dark

				
					<span class="badge badge-outline">
 Default
</span>
<span class="badge badge-outline badge-primary">
 Primary
</span>
<span class="badge badge-outline badge-success">
 Success
</span>
<span class="badge badge-outline badge-info">
 Info
</span>
<span class="badge badge-outline badge-danger">
 Danger
</span>
<span class="badge badge-outline badge-warning">
 Warning
</span>
<span class="badge badge-outline badge-dark">
 Dark
</span>

Apply the custom class


         .badge-pill

to set badges a pill style.

Preview HTML

Default Outline

				
					<span class="badge badge-pill badge-primary">
 Default
</span>
<span class="badge badge-pill badge-outline badge-primary">
 Outline
</span>

Use the custom classes


         .badge-xs

,


         .badge-sm

, or


         .badge-lg

to adjust the size of badges.

Preview HTML

Extra small Small Default Large

				
					<span class="badge badge-xs badge-outline badge-primary">
 Extra small
</span>
<span class="badge badge-sm badge-outline badge-primary">
 Small
</span>
<span class="badge badge-outline badge-primary">
 Default
</span>
<span class="badge badge-lg badge-outline badge-primary">
 Large
</span>

A custom badge example highlighted with a dot indicator element.

Preview HTML

New New

				
					<span class="badge badge-primary badge-pill gap-1.5">
 <span class="badge badge-dot badge-light size-1.5">
 </span>
 New
</span>
<span class="badge badge-primary badge-pill badge-outline gap-1.5">
 <span class="badge badge-dot badge-primary size-1.5">
 </span>
 New
</span>

Dot badge examples designed without accompanying text.

Preview HTML

				
					<span class="badge badge-dot size-2.5 badge-primary">
</span>
<span class="badge badge-dot size-2.5 badge-success">
</span>
<span class="badge badge-dot size-2.5 badge-info">
</span>
<span class="badge badge-dot size-2.5 badge-danger">
</span>
<span class="badge badge-dot size-2.5 badge-warning">
</span>
<span class="badge badge-dot size-2.5 badge-dark">
</span>
<span class="badge badge-dot size-2.5 bg-gray-400">
</span>

A custom badge example featuring KeenIcons displayed in an SVG hexagon shape.

Preview HTML

				
					<div class="relative size-[50px] shrink-0">
 <svg class="w-full h-full stroke-primary-clarity fill-primary-light" fill="none" height="48" viewbox="0 0 44 48" width="44" xmlns="http://www.w3.org/2000/svg">
  <path d="M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506 
					18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937 
					39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z" fill="#EFF6FF">
  </path>
  <path d="M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506 
					18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937 
					39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z" stroke="#1B84FF" stroke-opacity="0.2">
  </path>
 </svg>
 <div class="absolute leading-none left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4">
  <i class="ki-outline ki-abstract-39 text-1.5xl ps-px text-primary">
  </i>
 </div>
</div>
<div class="relative size-[50px] shrink-0">
 <svg class="w-full h-full stroke-danger-clarity fill-danger-light" fill="none" height="48" viewbox="0 0 44 48" width="44" xmlns="http://www.w3.org/2000/svg">
  <path d="M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506 
					18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937 
					39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z" fill="#EFF6FF">
  </path>
  <path d="M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506 
					18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937 
					39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z" stroke="#1B84FF" stroke-opacity="0.2">
  </path>
 </svg>
 <div class="absolute leading-none left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4">
  <i class="ki-outline ki-abstract-39 text-1.5xl ps-px text-danger">
  </i>
 </div>
</div>
<div class="relative size-[50px] shrink-0">
 <svg class="w-full h-full stroke-success-clarity fill-success-light" fill="none" height="48" viewbox="0 0 44 48" width="44" xmlns="http://www.w3.org/2000/svg">
  <path d="M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506 
					18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937 
					39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z" fill="#EFF6FF">
  </path>
  <path d="M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506 
					18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937 
					39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z" stroke="#1B84FF" stroke-opacity="0.2">
  </path>
 </svg>
 <div class="absolute leading-none left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4">
  <i class="ki-outline ki-abstract-39 text-1.5xl ps-px text-success">
  </i>
 </div>
</div>
<div class="relative size-[50px] shrink-0">
 <svg class="w-full h-full stroke-info-clarity fill-info-light" fill="none" height="48" viewbox="0 0 44 48" width="44" xmlns="http://www.w3.org/2000/svg">
  <path d="M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506 
					18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937 
					39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z" fill="#EFF6FF">
  </path>
  <path d="M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506 
					18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937 
					39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z" stroke="#1B84FF" stroke-opacity="0.2">
  </path>
 </svg>
 <div class="absolute leading-none left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4">
  <i class="ki-outline ki-abstract-39 text-1.5xl ps-px text-info">
  </i>
 </div>
</div>
<div class="relative size-[50px] shrink-0">
 <svg class="w-full h-full stroke-warning-clarity fill-warning-light" fill="none" height="48" viewbox="0 0 44 48" width="44" xmlns="http://www.w3.org/2000/svg">
  <path d="M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506 
					18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937 
					39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z" fill="#EFF6FF">
  </path>
  <path d="M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506 
					18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937 
					39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z" stroke="#1B84FF" stroke-opacity="0.2">
  </path>
 </svg>
 <div class="absolute leading-none left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4">
  <i class="ki-outline ki-abstract-39 text-1.5xl ps-px text-warning">
  </i>
 </div>
</div>
<div class="relative size-[50px] shrink-0">
 <svg class="w-full h-full stroke-dark-clarity fill-dark-light" fill="none" height="48" viewbox="0 0 44 48" width="44" xmlns="http://www.w3.org/2000/svg">
  <path d="M16 2.4641C19.7128 0.320509 24.2872 0.320508 28 2.4641L37.6506 8.0359C41.3634 10.1795 43.6506 14.141 43.6506 
					18.4282V29.5718C43.6506 33.859 41.3634 37.8205 37.6506 39.9641L28 45.5359C24.2872 47.6795 19.7128 47.6795 16 45.5359L6.34937 
					39.9641C2.63655 37.8205 0.349365 33.859 0.349365 29.5718V18.4282C0.349365 14.141 2.63655 10.1795 6.34937 8.0359L16 2.4641Z" fill="#EFF6FF">
  </path>
  <path d="M16.25 2.89711C19.8081 0.842838 24.1919 0.842837 27.75 2.89711L37.4006 8.46891C40.9587 10.5232 43.1506 14.3196 43.1506 
					18.4282V29.5718C43.1506 33.6804 40.9587 37.4768 37.4006 39.5311L27.75 45.1029C24.1919 47.1572 19.8081 47.1572 16.25 45.1029L6.59937 
					39.5311C3.04125 37.4768 0.849365 33.6803 0.849365 29.5718V18.4282C0.849365 14.3196 3.04125 10.5232 6.59937 8.46891L16.25 2.89711Z" stroke="#1B84FF" stroke-opacity="0.2">
  </path>
 </svg>
 <div class="absolute leading-none left-2/4 top-2/4 -translate-y-2/4 -translate-x-2/4">
  <i class="ki-outline ki-abstract-39 text-1.5xl ps-px text-dark">
  </i>
 </div>
</div>

The following source file manages the CSS styles of the Tailwind CSS Badge component. Upon building the assets using Webpack Build Tools , the below file is compiled and added into the


         dist/assets/css/styles.css

bundle, making it available globally across all pages.

File	Description
`src/core/plugins/components/badge.js`	The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Badge component.

Getting Started

Customization

Base Components

Navigation

Forms

Plugins

Tailwind CSS Badge

Default Badge

Outline

Pill

Sizes

With Dot

Dot

Hexagon

Source Code

On This Page