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 image

    Neil Sims

    email@flowbite.com

    Available
  • Bonnie image

    Bonnie Green

    email@flowbite.com

    Unavailable

Stepper indicator

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

  2. Step 2

  3. Step 2

  4. Step 3

  1. Step 1

  2. Step 2

  3. Step 2

  4. Step 3

Indicator position

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