Badge - Aatrox Admin Dashboard

Badge / Outline

PrimarySuccessDangerInfoWarning

PrimarySuccessDangerInfoWarning

<span class="badge text-white bg-primary-600 mr-3">Primary</span>
<span class="badge text-white bg-primary-600 mr-3">Success</span>
<span class="badge text-white bg-danger-600 mr-3">Danger</span>
<span class="badge text-white bg-info-600 mr-3">Info</span>
<span class="badge text-white bg-warning-600 mr-3">Warning</span>

<span class="badge text-primary-600 border border-primary-600 mr-3">Primary </span>
<span class="badge text-primary-600 border border-primary-600 mr-3">Success</span>
<span class="badge text-danger-600 border border-danger-600 mr-3">Danger</span>
<span class="badge text-info-600 border border-info-600 mr-3">Info</span>
<span class="badge text-info-600 border border-warning-600 mr-3">Warning</span>

Badge / Outline (Pill)

PrimarySuccessDangerInfoWarning

PrimarySuccessDangerInfoWarning

<span class="badge-pill text-white bg-primary-600 mr-3">Primary</span>
<span class="badge-pill text-white bg-primary-600 mr-3">Success</span>
<span class="badge-pill text-white bg-danger-600 mr-3">Danger</span>
<span class="badge-pill text-white bg-info-600 mr-3">Info</span>
<span class="badge-pill text-white bg-warning-500 mr-3">Warning </span>


<span class="badge-pill text-primary-600 border border-primary-600 mr-3">Primary</span>
<span class="badge-pill text-primary-600 border border-primary-600 mr-3">Success</span>
<span class="badge-pill text-danger-600 border border-danger-600 mr-3">Danger</span>
<span class="badge-pill text-info-600 border border-info-600 mr-3">Info</span>
<span class="badge-pill text-warning-600 border border-warning-600 mr-3">Warning</span>

Status Badge

<span class="badge-status bg-white border-4 border-primary-600 mr-3" href="#"></span>
<span class="badge-status bg-white border-4 border-primary-600 mr-3" href="#"></span>
<span class="badge-status bg-white border-4 border-danger-600 mr-3" href="#"></span>
<span class="badge-status bg-white border-4 border-info-600 mr-3" href="#"></span>
<span class="badge-status bg-white border-4 border-warning-500 mr-3" href="#"></span>


<span class="badge-status bg-primary-600 p-2 mr-3" href="#"></span>
<span class="badge-status bg-primary-600 p-2 mr-3" href="#"></span>
<span class="badge-status bg-danger-600 p-2 mr-3" href="#"></span>
<span class="badge-status bg-info-600 p-2 mr-3" href="#"></span>
<span class="badge-status bg-warning-600 p-2 mr-3" href="#"></span>


<span class="badge-status bg-primary-600 p-1 mr-3" href="#"></span>
<span class="badge-status bg-primary-600 p-1 mr-3" href="#"></span>
<span class="badge-status bg-danger-600 p-1 mr-3" href="#"></span>
<span class="badge-status bg-info-600 p-1 mr-3" href="#"></span>
<span class="badge-status bg-warning-600 p-1 mr-3" href="#"></span>

More Options

PrimarySuccessDangerInfoWarning

PrimarySuccessDangerInfoWarning

<span class="badge sm text-white bg-primary-600 mr-3">Primary</span>
<span class="badge sm text-white bg-primary-600 mr-3">Success</span>
<span class="badge sm text-white bg-danger-600 mr-3">Danger</span>
<span class="badge sm text-white bg-info-600 mr-3">Info</span>
<span class="badge sm text-white bg-warning-500 mr-3">Warning </span>

<span class="badge sm text-primary-600 border border-primary-600 mr-3">Primary</span>
<span class="badge sm text-primary-600 border border-primary-600 mr-3">Success</span>
<span class="badge sm text-danger-600 border border-danger-600 mr-3">Danger</span>
<span class="badge sm text-info-600 border border-info-600 mr-3">Info</span>
<span class="badge sm text-warning-600 border border-warning-600 mr-3">Warning</span>

Avatar Badge

<div class="badge-circle bg-info-100 text-info-600 font-bold h-10 w-10 mr-2">A</div>
<div class="badge-circle bg-primary-100 text-primary-600 font-bold h-10 w-10 mr-2">B</div>
<div class="badge-circle bg-primary-100 text-primary-700 font-bold h-10 w-10 mr-2">C</div>
<div class="badge-circle bg-danger-100 text-danger-600 font-bold h-10 w-10 mr-2">D</div>
<div class="badge-circle bg-warning-100 text-warning-600 font-bold h-10 w-10 mr-2">E</div>