Indicator
Default indicator
html
typescript
<span flowbiteIndicator></span>
<span
flowbiteIndicator
color="info"></span>
<span
flowbiteIndicator
color="failure"></span>
<span
flowbiteIndicator
color="success"></span>
<span
flowbiteIndicator
color="warning"></span>
<span
flowbiteIndicator
color="primary"></span>
Themes
Indicator
{
"host": {
"base": "inline-flex shrink-0 items-center justify-center rounded-full font-bold",
"transition ": "",
"border": {
"on": "border-2",
"off": "border-none"
},
"color": {
"default": {
"light": "bg-gray-500",
"dark": "dark:bg-gray-500"
},
"info": {
"light": "bg-blue-500",
"dark": "dark:bg-blue-500"
},
"failure": {
"light": "bg-red-500",
"dark": "dark:bg-red-500"
},
"success": {
"light": "bg-green-500",
"dark": "dark:bg-green-500"
},
"warning": {
"light": "bg-yellow-500",
"dark": "dark:bg-yellow-500"
},
"primary": {
"light": "bg-primary-500",
"dark": "dark:bg-primary-500"
}
},
"size": {
"xs": "h-2 w-2 text-xs",
"sm": "h-3 w-3 text-sm",
"md": "h-4 w-4 text-sm",
"lg": "h-5 w-5 text-sm",
"xl": "h-6 w-6 text-sm"
},
"position": {
"top-left": "top-0 left-0 -translate-x-1/3 -translate-y-1/3",
"top-center": "top-0 left-1/2 -translate-x-1/2 -translate-y-1/3",
"top-right": "top-0 right-0 translate-x-1/3 -translate-y-1/3",
"center-left": "top-1/2 left-0 -translate-x-1/3 -translate-y-1/2",
"center": "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
"center-right": "top-1/2 right-0 translate-x-1/3 -translate-y-1/2",
"bottom-left": "bottom-0 left-0 -translate-x-1/3 translate-y-1/3",
"bottom-center": "bottom-0 left-1/2 -translate-x-1/2 translate-y-1/3",
"bottom-right": "right-0 bottom-0 translate-x-1/3 translate-y-1/3"
}
}
}