Indicator

Indicators are used to place an element on the corner of another element.

This page is not up to date. Some of the examples might not work as expected.
Class name		Type
indicator
Component
Container element
indicator-item
Part
will be placed on the corner of sibling
indicator-start
Placement
align horizontally to the start
indicator-center
Placement
align horizontally to the center
indicator-end
Placement
align horizontally to the end (default)
indicator-top
Placement
align vertically to top (default)
indicator-middle
Placement
align vertically to middle
indicator-bottom
Placement
align vertically to bottom

Empty badge as indicator

content
<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

Badge as indicator

new
content
<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-primary">new</span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-primary">new</span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

for button

99+ 
<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary">99+</span>
  <button class="$$btn">inbox</button>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary">99+</span>
  <button class="$$btn">inbox</button>
</div>

for tab

<div class="$$tabs $$tabs-lift">
  <a class="$$tab">Messages</a>
  <a class="$$indicator $$tab $$tab-active">
    Notifications
    <span class="$$indicator-item $$badge">8</span>
  </a>
  <a class="$$tab">Requests</a>
</div>
<div class="$$tabs $$tabs-lift">
  <a class="$$tab">Messages</a>
  <a class="$$indicator $$tab $$tab-active">
    Notifications
    <span class="$$indicator-item $$badge">8</span>
  </a>
  <a class="$$tab">Requests</a>
</div>

for avatar

typing…
Tailwind CSS examples
<div class="$$avatar $$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary">typing…</span>
  <div class="h-20 w-20 rounded-lg">
    <img
      alt="Tailwind CSS examples"
      src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>
<div class="$$avatar $$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary">typing…</span>
  <div class="h-20 w-20 rounded-lg">
    <img
      alt="Tailwind CSS examples"
      src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
  </div>
</div>

for an input

Required 
<div class="$$indicator">
  <span class="$$indicator-item $$badge">Required</span>
  <input type="text" placeholder="Your email address" class="$$input $$input-bordered" />
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$badge">Required</span>
  <input type="text" placeholder="Your email address" class="$$input $$input-bordered" />
</div>

A button as an indicator for a card

Job Title

Rerum reiciendis beatae tenetur excepturi

<div class="$$indicator">
  <div class="$$indicator-item $$indicator-bottom">
    <button class="$$btn $$btn-primary">Apply</button>
  </div>
  <div class="$$card border">
    <div class="$$card-body">
      <h2 class="$$card-title">Job Title</h2>
      <p>Rerum reiciendis beatae tenetur excepturi</p>
    </div>
  </div>
</div>
<div class="$$indicator">
  <div class="$$indicator-item $$indicator-bottom">
    <button class="$$btn $$btn-primary">Apply</button>
  </div>
  <div class="$$card border">
    <div class="$$card-body">
      <h2 class="$$card-title">Job Title</h2>
      <p>Rerum reiciendis beatae tenetur excepturi</p>
    </div>
  </div>
</div>

in center of an image

Uploading Image... Tailwind CSS examples
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-center $$indicator-middle $$badge $$badge-secondary">
    Uploading Image...
  </span>
  <img
    alt="Tailwind CSS examples"
    src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" />
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-center $$indicator-middle $$badge $$badge-secondary">
    Uploading Image...
  </span>
  <img
    alt="Tailwind CSS examples"
    src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" />
</div>

indicator-top (default) indicator-start

content
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-start $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-start $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-top (default) indicator-center

content
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-center $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-center $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-top (default) indicator-end (default)

content
<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-middle indicator-start

content
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-middle $$indicator-start $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-middle $$indicator-start $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-middle indicator-center

content
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-middle $$indicator-center $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-middle $$indicator-center $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-middle indicator-end (default)

content
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-middle $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-middle $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-bottom indicator-start

content
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-bottom $$indicator-start $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-bottom $$indicator-start $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-bottom indicator-center

content
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-bottom $$indicator-center $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-bottom $$indicator-center $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

indicator-bottom indicator-end (default)

content
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-bottom $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-bottom $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

multiple indicators

top+start top+center top+end middle+start middle+center middle+end bottom+start bottom+center bottom+end
content
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-top $$indicator-start $$badge $$badge-secondary">
    top+start
  </span>
  <span class="$$indicator-item $$indicator-top $$indicator-center $$badge $$badge-secondary">
    top+center
  </span>
  <span class="$$indicator-item $$indicator-top $$indicator-end $$badge $$badge-secondary">
    top+end
  </span>
  <span class="$$indicator-item $$indicator-middle $$indicator-start $$badge $$badge-secondary">
    middle+start
  </span>
  <span class="$$indicator-item $$indicator-middle $$indicator-center $$badge $$badge-secondary">
    middle+center
  </span>
  <span class="$$indicator-item $$indicator-middle $$indicator-end $$badge $$badge-secondary">
    middle+end
  </span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-start $$badge $$badge-secondary">
    bottom+start
  </span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-center $$badge $$badge-secondary">
    bottom+center
  </span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-end $$badge $$badge-secondary">
    bottom+end
  </span>
  <div class="bg-base-300 grid h-32 w-60 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span class="$$indicator-item $$indicator-top $$indicator-start $$badge $$badge-secondary">
    top+start
  </span>
  <span class="$$indicator-item $$indicator-top $$indicator-center $$badge $$badge-secondary">
    top+center
  </span>
  <span class="$$indicator-item $$indicator-top $$indicator-end $$badge $$badge-secondary">
    top+end
  </span>
  <span class="$$indicator-item $$indicator-middle $$indicator-start $$badge $$badge-secondary">
    middle+start
  </span>
  <span class="$$indicator-item $$indicator-middle $$indicator-center $$badge $$badge-secondary">
    middle+center
  </span>
  <span class="$$indicator-item $$indicator-middle $$indicator-end $$badge $$badge-secondary">
    middle+end
  </span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-start $$badge $$badge-secondary">
    bottom+start
  </span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-center $$badge $$badge-secondary">
    bottom+center
  </span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-end $$badge $$badge-secondary">
    bottom+end
  </span>
  <div class="bg-base-300 grid h-32 w-60 place-items-center">content</div>
</div>

Responsive

changes position based on resolution
content
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-start sm:$$indicator-middle md:$$indicator-bottom lg:$$indicator-center xl:$$indicator-end badge badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-start sm:$$indicator-middle md:$$indicator-bottom lg:$$indicator-center xl:$$indicator-end badge badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser