Indicator
Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component coded with Tailwind CSS
Default indicator
html
typescript
<flowbite-indicator />
<flowbite-indicator color="dark" />
<flowbite-indicator color="gray" />
<flowbite-indicator color="blue" />
<flowbite-indicator color="green" />
<flowbite-indicator color="red" />
<flowbite-indicator color="purple" />
<flowbite-indicator color="indigo" />
<flowbite-indicator color="yellow" />
<flowbite-indicator color="teal" />Legend indicator
html
typescript
<span class="flex items-center">
<flowbite-indicator
size="sm"
class="mr-1.5">
</flowbite-indicator>
Visitors
</span>
<span class="flex items-center">
<flowbite-indicator
size="sm"
class="mr-1.5"
color="blue">
</flowbite-indicator>
Sessions
</span>
<span class="flex items-center">
<flowbite-indicator
size="sm"
class="mr-1.5"
color="green">
</flowbite-indicator>
Customers
</span>
<span class="flex items-center">
<flowbite-indicator
size="sm"
class="mr-1.5"
color="dark">
</flowbite-indicator>
Revenue
</span>
<span class="flex items-center">
<flowbite-indicator
size="sm"
class="mr-1.5"
color="purple">
</flowbite-indicator>
Revenue
</span>Indicator count
html
typescript
<flowbite-button class="relative">
<flowbite-icon
svgIcon="outline:message-dots"
class="w-5 h-5 mr-1" />
Messages
<flowbite-indicator
[hasBorder]="true"
size="xl"
[hasOffset]="true"
placement="top-right">
8
</flowbite-indicator>
</flowbite-button>Indicator position
html
typescript
<div
class="w-56 h-56 relative bg-gray-300 borer border-gray-500 rounded-lg dark:bg-gray-900 dark:border-gray-700">
<flowbite-indicator
[hasOffset]="true"
placement="top-left"
color="gray" />
<flowbite-indicator
[hasOffset]="true"
placement="top-center"
color="blue" />
<flowbite-indicator
[hasOffset]="true"
placement="top-right"
color="green" />
<flowbite-indicator
[hasOffset]="true"
placement="center-left"
color="red" />
<flowbite-indicator
[hasOffset]="true"
placement="center"
color="purple" />
<flowbite-indicator
[hasOffset]="true"
placement="center-right"
color="indigo" />
<flowbite-indicator
[hasOffset]="true"
placement="bottom-left"
color="yellow" />
<flowbite-indicator
[hasOffset]="true"
placement="bottom-center"
color="teal" />
<flowbite-indicator
[hasOffset]="true"
placement="bottom-right"
color="dark" />
</div>