| Badge Color |
badge badge-[color] |
<span class="badge badge-primary">Primary</span><span class="badge badge-secondary">Secondary</span><span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-dark-gray">Dark-gray</span>
<span class="badge badge-black">Black</span>
|
PrimarySecondarySuccessDangerWarningDark-grayBlack |
| Badge Color with Icon |
badge badge-[color] mdi mdi-[icon] |
<span class="badge badge-primary mdi mdi-truck-fast">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success mdi mdi-check">Success</span>
<span class="badge badge-danger mdi mdi-trash-can-outline">Danger</span>
<span class="badge badge-warning mdi mdi-basket">Warning</span>
<span class="badge badge-dark-gray">Dark-gray</span>
<span class="badge badge-black mdi mdi-bullseye-arrow">Black</span>
|
PrimarySecondarySuccessDangerWarningDark-grayBlack |
| Badge Color with Icon Medium |
badge badge-[color] mdi mdi-[icon] |
<span class="badge badge-md badge-primary mdi mdi-truck-fast">Primary</span>
<span class="badge badge-md badge-secondary">Secondary</span>
<span class="badge badge-md badge-success mdi mdi-check">Success</span>
<span class="badge badge-md badge-danger mdi mdi-trash-can-outline">Danger</span>
<span class="badge badge-md badge-warning mdi mdi-basket">Warning</span>
<span class="badge badge-md badge-dark-gray">Dark-gray</span>
<span class="badge badge-md badge-black mdi mdi-bullseye-arrow">Black</span>
|
PrimarySecondarySuccessDangerWarningDark-grayBlack |