Badge

Informative notification indicator to the corner

Properties#

Features#

status#

badge button

<!-- span -->
<span class="badge">
  badge
  <span class="badge badge-status"></span>
</span>

<!-- button -->
<button class="button badge">
  button
  <span class="badge badge-status"></span>
</button>

<!-- avatar initial -->
<figure class="avatar badge" data-initial="avatar">
  <span class="badge badge-status"></span>
</figure>

<!-- avatar image -->
<figure class="avatar avatar-rounded badge">
  <img src="/avatar-1.svg" alt="Avatar">
  <span class="badge badge-status"></span>
</figure>

text#

Use paddings for inline or small elements to avoid overlapping.

badge 10 button new

10000

Hi

<!-- span -->
<span class="badge p-1">
  badge
  <span class="badge badge-text">10</span>
</span>

<!-- button -->
<button class="button badge">
  button
  <span class="badge badge-text">new</span>
</button>

<!-- avatar initial -->
<figure class="avatar badge" data-initial="avatar">
  <span class="badge badge-text">10000</span>
</figure>

<!-- avatar image -->
<figure class="avatar avatar-rounded badge">
  <img src="/avatar-1.svg" alt="Avatar">
  <span class="badge badge-text">Hi!</span>
</figure>

size#

Change the badge size with height and width

<!-- span -->
<span class="badge p-1">
  badge
  <span class="badge badge-text h-6 text-xl">10</span>
</span>

<!-- button -->
<button class="button badge">
  button
  <span class="badge badge-text bg-indigo-500 h-6 w-6">new</span>
</button>

colors#

Change the badge color with background color

badge 10 button new

Hi!

<!-- span -->
<span class="badge p-1">
    badge
  <span class="badge badge-text">10</span>
</span>

<!-- button -->
<button class="button badge">
  button
  <span class="badge badge-text">new</span>
</button>

<!-- avatar initial -->
<figure class="avatar badge" data-initial="avatar">
  <span class="badge badge-status"></span>
</figure>

<!-- avatar image -->
<figure class="avatar avatar-rounded badge">
  <img src="/avatar-1.svg" alt="Avatar">
  <span class="badge badge-text">Hi!</span>
</figure>

positioning#

Change the position of the badge with transform and translate

Do considering using class templates to support IE browsers.

<button class="button badge mx-4 bg-gray-300">
  button
  <span class="badge badge-text bg-primary-500 right-auto left-0 transform -translate-x-1/2 -translate-y-1/2">top-left</span>
</button>

<button class="button badge mx-4 bg-gray-300">
  button
  <span class="badge badge-text bg-primary-500">top-right</span>
</button>

<button class="button badge mx-4 bg-gray-300">
  button
  <span class="badge badge-text bg-primary-500 top-auto bottom-0 left-0 transform -translate-x-1/2 translate-y-1/2">bottom-left</span>
</button>

<button class="button badge mx-4 bg-gray-300">
  button
  <span class="badge badge-text bg-primary-500 top-auto bottom-0 transform translate-x-1/2 translate-y-1/2">bottom-right</span>
</button>