Indicator

The indicator component can be used as a small element positioned absolutely relative to another component such as a button or card and show a number count, account status (red for offline, green for online) and other useful information.

Default indicator

Use this example to create a simple indicator with multiple colors and position it anywhere on the website.

Legend indicator

This example can be used as a legend indicator for charts to also add a text next to the bullet point.

Visitors

Sessions

Customers

Revenue

Indicator count

This example can be used to show a number count inside the indicator and position it relative to a button component.

Status indicator

Use this example to show a status indicator for the currently logged in user by showing red for offline and green for online. `Avatar` component uses `Indicator` internally as parameter `dot`. You can pass all props accepted by `Indicator` component as an object.

Badge indicator

This example can be used to add an indicator inside of a badge component.

Neil Sims

email@flowbite.com

Available
Bonnie Green

email@flowbite.com

Unavailable

Stepper indicator

You can also use the indicators inside of a stepper component when completing a form element.

Step 1
Step 2
Step 2
Step 3

Step 1
Step 2
Step 2
Step 3

Indicator position

Use these examples to position the indicator component anywhere relative to the parent element.

Indicator

Default indicator

Legend indicator

Indicator count

Status indicator

Badge indicator

Stepper indicator

Step 1

Step 2

Step 2

Step 3

Step 1

Step 2

Step 2

Step 3

Indicator position