Indicator
Indicators are used to place an element on the corner of another element.
| Class name | Type | |
|---|---|---|
| indicator | Component | Container element |
| indicator-item | Component | 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… 
# 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... 
# 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
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