Indicator

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

Class name
Type
indicatorComponent Container element
indicator-itemComponent will be placed on the corner of sibling
indicator-start
Responsive
align horizontally to the left
indicator-center
Responsive
align horizontally to the center
indicator-end
Responsive
align horizontally to the right (default)
indicator-top
Responsive
align vertically to top (default)
indicator-middle
Responsive
align vertically to middle
indicator-bottom
Responsive
align vertically to bottom
# Empty badge as indicator
content
# Badge as indicator
new
content
# for button
99+
# for tab
# for avatar
typing…
Tailwind CSS examples
# for an input
Required
# A button as an indicator for a card

Job Title

Rerum reiciendis beatae tenetur excepturi

# in center of an image
Uploading Image... Tailwind CSS examples
# indicator-top (default) indicator-start
content
# indicator-top (default) indicator-center
content
# indicator-top (default) indicator-end (default)
content
# indicator-middle indicator-start
content
# indicator-middle indicator-center
content
# indicator-middle indicator-end (default)
content
# indicator-bottom indicator-start
content
# indicator-bottom indicator-center
content
# indicator-bottom indicator-end (default)
content
# multiple indicators
top+start top+center top+end middle+start middle+center middle+end bottom+start bottom+center bottom+end
content
# Responsive
changes position based on resolution
content
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