Flowbite Svelte: v0.46.14
Svelte: v5.0.0-next.179
SvelteKit: v2.5.18
Vite: v5.3.3
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
AvailableBonnie 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