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!