daisyUI Documentation - Indicator Component

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

Classes and Usage

Core Classes:

indicator - The main indicator container
indicator-item - The indicator element itself
indicator-start - Aligns indicator to start
indicator-center - Centers indicator
indicator-end - Aligns indicator to end
indicator-top - Positions indicator at top
indicator-middle - Positions indicator in middle
indicator-bottom - Positions indicator at bottom

Examples

Basic Indicator

<div class="indicator">
  <span class="indicator-item badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

Indicator with Positioning

<!-- Top start -->
<div class="indicator">
  <span class="indicator-item indicator-top indicator-start badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

<!-- Top center -->
<div class="indicator">
  <span class="indicator-item indicator-top indicator-center badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

<!-- Top end -->
<div class="indicator">
  <span class="indicator-item indicator-top indicator-end badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

<!-- Middle start -->
<div class="indicator">
  <span class="indicator-item indicator-middle indicator-start badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

<!-- Middle end -->
<div class="indicator">
  <span class="indicator-item indicator-middle indicator-end badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

<!-- Bottom start -->
<div class="indicator">
  <span class="indicator-item indicator-bottom indicator-start badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

<!-- Bottom center -->
<div class="indicator">
  <span class="indicator-item indicator-bottom indicator-center badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

<!-- Bottom end -->
<div class="indicator">
  <span class="indicator-item indicator-bottom indicator-end badge badge-secondary">new</span>
  <div class="bg-base-200 border-base-300 border rounded-box w-full h-48"></div>
</div>

Indicator with Avatar

<div class="indicator">
  <span class="indicator-item indicator-top indicator-end badge badge-error">1</span>
  <div class="avatar placeholder">
    <div class="bg-neutral text-neutral-content rounded-full w-24">
      <span class="text-xl">U</span>
    </div>
  </div>
</div>

Indicator with Button

<div class="indicator">
  <span class="indicator-item indicator-top indicator-end badge badge-error">1</span>
  <button class="btn btn-primary">Messages</button>
</div>

Features

Places elements on the corner of another element
Multiple positioning options (top, middle, bottom and start, center, end)
Works with badges, avatars, buttons and other elements
Responsive design

This component is useful for creating notification indicators, badges, or any overlay elements that need to be positioned relative to other content.

3.5 KiB Raw Permalink Blame History