<!--Background color-->
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-gray-100">Light</span>
<span class="badge text-bg-dark">Dark</span><!--Background color-->
<span class="badge text-primary-emphasis bg-primary-subtle border
border-primary-subtle"
>Primary
</span>
<span class="badge text-secondary-emphasis bg-secondary-subtle
border border-secondary-subtle"
>Secondary</span
>
<span class="badge text-success-emphasis bg-success-subtle border
border-success-subtle"
>Success</span
>
<span class="badge text-danger-emphasis bg-danger-subtle border
border-danger-subtle"
>Danger</span
>
<span class="badge text-warning-emphasis bg-warning-subtle "
>Warning</span
>
<span class="badge text-info-emphasis bg-info-subtle border
border-info-subtle">Info</span><!--Background color-->
<span
class="badge text-primary-emphasis bg-primary-subtle border
border-primary-subtle d-inline-flex gap-1 align-items-center"
>
Primary
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline
icon-tabler-box"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
<path d="M12 12l8 -4.5" />
<path d="M12 12l0 9" />
<path d="M12 12l-8 -4.5" />
</svg>
</span>
<span
class="badge text-secondary-emphasis bg-secondary-subtle
border border-secondary-subtle d-inline-flex gap-1 align-items-center"
>
Secondary
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline
icon-tabler-box"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
<path d="M12 12l8 -4.5" />
<path d="M12 12l0 9" />
<path d="M12 12l-8 -4.5" />
</svg>
</span>
<span
class="badge text-success-emphasis bg-success-subtle border
border-success-subtle d-inline-flex gap-1 align-items-center"
>
Success
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline
icon-tabler-box"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
<path d="M12 12l8 -4.5" />
<path d="M12 12l0 9" />
<path d="M12 12l-8 -4.5" />
</svg>
</span>
<span
class="badge text-danger-emphasis bg-danger-subtle border
border-danger-subtle d-inline-flex gap-1 align-items-center"
>
Danger
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline
icon-tabler-box"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
<path d="M12 12l8 -4.5" />
<path d="M12 12l0 9" />
<path d="M12 12l-8 -4.5" />
</svg>
</span>
<span
class="badge text-warning-emphasis bg-warning-subtle
d-inline-flex gap-1 align-items-center"
>
Warning
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline
icon-tabler-box"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
<path d="M12 12l8 -4.5" />
<path d="M12 12l0 9" />
<path d="M12 12l-8 -4.5" />
</svg>
</span>
<span
class="badge text-info-emphasis bg-info-subtle border
border-info-subtle d-inline-flex gap-1 align-items-center"
>
Info
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler icons-tabler-outline
icon-tabler-box"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" />
<path d="M12 12l8 -4.5" />
<path d="M12 12l0 9" />
<path d="M12 12l-8 -4.5" />
</svg>
</span> <div class="position-relative d-inline-flex">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 24 24"
fill="currentColor"
class="icon icon-tabler icons-tabler-filled
icon-tabler-mail"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path
d="M22 7.535v9.465a3 3 0 0 1 -2.824 2.995l-.176
.005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-9.465l9.445 6.297l.116 .066a1 1 0 0 0 .878
0l.116 -.066l9.445 -6.297z"
/>
<path
d="M19 4c1.08 0 2.027 .57 2.555 1.427l-9.555
6.37l-9.555 -6.37a2.999 2.999 0 0 1 2.354 -1.42l.201 -.007h14z"
/>
</svg>
<span
class="position-absolute top-0 start-100 translate-middle
badge rounded-pill bg-danger"
>
9+
<span class="visually-hidden">unread messages</span>
</span>
</div>
<div class="position-relative d-inline-flex">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 24 24"
fill="currentColor"
class="icon icon-tabler icons-tabler-filled
icon-tabler-mail"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path
d="M22 7.535v9.465a3 3 0 0 1 -2.824 2.995l-.176
.005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-9.465l9.445 6.297l.116 .066a1 1 0 0 0 .878
0l.116 -.066l9.445 -6.297z"
/>
<path
d="M19 4c1.08 0 2.027 .57 2.555 1.427l-9.555
6.37l-9.555 -6.37a2.999 2.999 0 0 1 2.354 -1.42l.201 -.007h14z"
/>
</svg>
<span
class="position-absolute top-0 start-100 translate-middle
badge rounded-pill bg-danger"
>
99+
<span class="visually-hidden">unread messages</span>
</span>
</div>
<div class="position-relative d-inline-flex">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 24 24"
fill="currentColor"
class="icon icon-tabler icons-tabler-filled
icon-tabler-mail"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path
d="M22 7.535v9.465a3 3 0 0 1 -2.824 2.995l-.176
.005h-14a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-9.465l9.445 6.297l.116 .066a1 1 0 0 0 .878
0l.116 -.066l9.445 -6.297z"
/>
<path
d="M19 4c1.08 0 2.027 .57 2.555 1.427l-9.555
6.37l-9.555 -6.37a2.999 2.999 0 0 1 2.354 -1.42l.201 -.007h14z"
/>
</svg>
<span
class="position-absolute top-0 start-100 translate-middle
badge rounded-pill bg-danger"
>
999+
<span class="visually-hidden">unread messages</span>
</span>
</div><div class="position-relative d-inline-flex">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 24 24"
fill="currentColor"
class="icon icon-tabler icons-tabler-filled
icon-tabler-bell"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path
d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992
0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634
-1.661l.11 -.006h4.471z"
/>
<path
d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008
.043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143
1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387
-1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821
-6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004z"
/>
</svg>
<span
class="position-absolute top-0 mt-1 ms-n1 start-100
translate-middle p-1 bg-primary border border-light rounded-circle"
>
<span class="visually-hidden">New alerts</span>
</span>
</div>
<div class="position-relative d-inline-flex">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 24 24"
fill="currentColor"
class="icon icon-tabler icons-tabler-filled
icon-tabler-bell"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path
d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992
0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634
-1.661l.11 -.006h4.471z"
/>
<path
d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008
.043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143
1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387
-1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821
-6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004z"
/>
</svg>
<span
class="position-absolute top-0 mt-1 ms-n1 start-100
translate-middle p-1 bg-secondary border border-light rounded-circle"
>
<span class="visually-hidden">New alerts</span>
</span>
</div>
<div class="position-relative d-inline-flex">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 24 24"
fill="currentColor"
class="icon icon-tabler icons-tabler-filled
icon-tabler-bell"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path
d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992
0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634
-1.661l.11 -.006h4.471z"
/>
<path
d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008
.043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143
1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387
-1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821
-6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004z"
/>
</svg>
<span
class="position-absolute top-0 mt-1 ms-n1 start-100
translate-middle p-1 bg-success border border-light rounded-circle"
>
<span class="visually-hidden">New alerts</span>
</span>
</div>
<div class="position-relative d-inline-flex">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 24 24"
fill="currentColor"
class="icon icon-tabler icons-tabler-filled
icon-tabler-bell"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path
d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992
0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634
-1.661l.11 -.006h4.471z"
/>
<path
d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008
.043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143
1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387
-1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821
-6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004z"
/>
</svg>
<span
class="position-absolute top-0 mt-1 ms-n1 start-100
translate-middle p-1 bg-danger border border-light rounded-circle"
>
<span class="visually-hidden">New alerts</span>
</span>
</div>
<div class="position-relative d-inline-flex">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 24 24"
fill="currentColor"
class="icon icon-tabler icons-tabler-filled
icon-tabler-bell"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path
d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992
0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634
-1.661l.11 -.006h4.471z"
/>
<path
d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008
.043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143
1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387
-1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821
-6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004z"
/>
</svg>
<span
class="position-absolute top-0 mt-1 ms-n1 start-100
translate-middle p-1 bg-warning border border-light rounded-circle"
>
<span class="visually-hidden">New alerts</span>
</span>
</div>
<div class="position-relative d-inline-flex">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 24 24"
fill="currentColor"
class="icon icon-tabler icons-tabler-filled
icon-tabler-bell"
>
<path stroke="none"
d="M0 0h24v24H0z" fill="none"
/>
<path
d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992
0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634
-1.661l.11 -.006h4.471z"
/>
<path
d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008
.043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143
1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387
-1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821
-6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004z"
/>
</svg>
<span
class="position-absolute top-0 mt-1 ms-n1 start-100
translate-middle p-1 bg-info border border-light rounded-circle"
>
<span class="visually-hidden">New alerts</span>
</span>
</div> <button type="button" class="btn btn-primary">
Notifications <span class="badge text-bg-danger">4</span>
</button><div
class="avatar avatar-md bg-secondary rounded-circle
position-relative"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
data-bs-title="always"
>
<span
class="position-absolute bottom-0 start-100
translate-middle p-1 ms-n1 mb-n1 bg-warning border border-light rounded-circle"
>
<span class="visually-hidden">New alerts</span>
</span>
</div>
<div
class="avatar avatar-md bg-secondary rounded-circle
position-relative"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
data-bs-title="online"
>
<span
class="position-absolute bottom-0 start-100
translate-middle p-1 ms-n1 mb-n1 bg-success border border-light rounded-circle"
>
<span class="visually-hidden">New alerts</span>
</span>
</div>
<div
class="avatar avatar-md bg-secondary rounded-circle
position-relative"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
data-bs-title="busy"
>
<span
class="position-absolute bottom-0 start-100
translate-middle p-1 ms-n1 mb-n1 bg-danger border border-light rounded-circle"
>
<span class="visually-hidden">New alerts</span>
</span>
</div>
<div
class="avatar avatar-md bg-secondary rounded-circle
position-relative"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
data-bs-title="offline"
>
<span
class="position-absolute bottom-0 start-100
translate-middle p-1 ms-n1 mb-n1 bg-gray-100 border border-2 border-seconary
rounded-circle"
>
<span class="visually-hidden">New alerts</span>
</span>
</div>
<div
class="avatar avatar-md bg-secondary rounded-circle
position-relative"
data-bs-toggle="tooltip"
data-bs-placement="bottom"
data-bs-title="invisible"
></div>