Tailwind CSS Badge - Versoly UI

Added in 1.0

Examples

primary secondary tertiary neutral success info danger warning 
<span class="badge bg-primary">primary</span>
<span class="badge bg-secondary">secondary</span>
<span class="badge bg-tertiary">tertiary</span>
<span class="badge bg-neutral">neutral</span>
<span class="badge bg-success">success</span>
<span class="badge bg-info">info</span>
<span class="badge bg-danger">danger</span>
<span class="badge bg-warning">warning</span>

Large

primary secondary tertiary neutral success info danger warning 
<span class="badge badge-lg bg-primary">primary</span>
<span class="badge badge-lg bg-secondary">secondary</span>
<span class="badge badge-lg bg-tertiary">tertiary</span>
<span class="badge badge-lg bg-neutral">neutral</span>
<span class="badge badge-lg bg-success">success</span>
<span class="badge badge-lg bg-info">info</span>
<span class="badge badge-lg bg-danger">danger</span>
<span class="badge badge-lg bg-warning">warning</span>

Pill

primary secondary tertiary neutral success info danger warning 
<span class="badge bg-primary rounded-full">primary</span>
<span class="badge bg-secondary rounded-full">secondary</span>
<span class="badge bg-tertiary rounded-full">tertiary</span>
<span class="badge bg-neutral rounded-full">neutral</span>
<span class="badge bg-success rounded-full">success</span>
<span class="badge bg-info rounded-full">info</span>
<span class="badge bg-danger rounded-full">danger</span>
<span class="badge bg-warning rounded-full">warning</span>

Full Width

primary secondary tertiary neutral success info danger warning 
<span class="badge bg-primary w-full">primary</span>
<span class="badge bg-secondary w-full">secondary</span>
<span class="badge bg-tertiary w-full">tertiary</span>
<span class="badge bg-neutral w-full">neutral</span>
<span class="badge bg-success w-full">success</span>
<span class="badge bg-info w-full">info</span>
<span class="badge bg-danger w-full">danger</span>
<span class="badge bg-warning w-full">warning</span>

Headings

h1 heading New

h2 heading New

h3 heading New

h4 heading New

h5 heading New 
<h1 class="mb-3">h1 heading <span class="badge bg-secondary">New</span></h1>
<h2 class="mb-3">h2 heading <span class="badge bg-secondary">New</span></h2>
<h3 class="mb-3">h3 heading <span class="badge bg-secondary">New</span></h3>
<h4 class="mb-3">h4 heading <span class="badge bg-secondary">New</span></h4>
<h5 class="mb-3">h5 heading <span class="badge bg-secondary">New</span></h5>

Button

<button class="btn btn-primary">
  Notifications <span class="badge bg-secondary ml-2">4</span>
</button>