Svelte Indicators - Flowbite

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

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.

Setup #

  • Svelte
<script>
  import { Indicator } from "flowbite-svelte"
</script>

Default indicator #

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

  Edit on GitHub
  • Svelte
<script>
  import { Indicator } from 'flowbite-svelte'
</script>

<Indicator color="gray"/>
<Indicator color="dark"/>
<Indicator color="blue"/>
<Indicator color="green"/>
<Indicator color="red"/>
<Indicator color="purple"/>
<Indicator color="indigo"/>
<Indicator color="yellow"/>
<Indicator color="teal"/>

Legend indicator #

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

  Edit on GitHub
Visitors
Sessions
Customers
Revenue
  • Svelte
<script>
  import { Indicator } from 'flowbite-svelte'
</script>

<span class="flex items-center"><Indicator size="sm" color="blue" class="mr-1.5"/>Visitors</span>
<span class="flex items-center"><Indicator size="sm" color="purple" class="mr-1.5"/>Sessions</span>
<span class="flex items-center"><Indicator size="sm" color="indigo" class="mr-1.5"/>Customers</span>
<span class="flex items-center"><Indicator size="sm" color="teal" class="mr-1.5"/>Revenue</span>

Indicator count #

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

  Edit on GitHub
  • Svelte
<script>
  import { Indicator, Button } from 'flowbite-svelte'
</script>

  <Button size="lg" class="relative">
      <svg class="w-5 h-5 mr-1" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
    <span class="sr-only">Notifications</span>
    Messages
    <Indicator color="red" border size="xl" placement="top-right">
      <span class="text-white text-xs font-bold">8</span>
    </Indicator>
  </Button>

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.

  Edit on GitHub
  • Svelte
<script>
  import { Indicator, Avatar } from 'flowbite-svelte'
</script>

<Avatar src="/images/profile-picture-5.webp" dot={{color:"green", size: "lg", placement:"top-right"}} />
<Avatar src="/images/profile-picture-5.webp" dot={{color:"red", size: "lg", placement:"top-right"}} />

Badge indicator #

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

  Edit on GitHub
  • Neil image

    Neil Sims

    email@flowbite.com

    Available
  • Bonnie image

    Bonnie Green

    email@flowbite.com

    Unavailable
  • Svelte
<script>
  import { Indicator, Avatar, Badge } from 'flowbite-svelte'
</script>

<ul class="max-w-sm divide-y divide-gray-200 dark:divide-gray-700 w-full">
    <li class="py-3 sm:py-4">
        <div class="flex items-center space-x-3">
                <Avatar src="/images/profile-picture-5.webp"  alt="Neil image" />
            <div class="flex-1 min-w-0">
                <p class="text-sm font-semibold text-gray-900 truncate dark:text-white">Neil Sims</p>
                <p class="text-sm text-gray-500 truncate dark:text-gray-400">email@flowbite.com</p>
            </div>
            <Badge color="green" rounded class="px-2.5 py-0.5">
                <Indicator color="green" size="xs" class="mr-1"/>Available
            </Badge>
        </div>
    </li>
    <li class="py-3 sm:py-4">
        <div class="flex items-center space-x-3">
            <div class="flex-shrink-0">
                <Avatar src="/images/profile-picture-4.webp"  alt="Bonnie image" />
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-sm font-semibold text-gray-900 truncate dark:text-white">Bonnie Green</p>
                <p class="text-sm text-gray-500 truncate dark:text-gray-400">email@flowbite.com</p>
            </div>
            <Badge color="red"  rounded class="px-2.5 py-0.5">
                <Indicator color="red" size="xs" class="mr-1"/>Unavailable
            </Badge>
        </div>
    </li>
</ul>

Stepper indicator #

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

  Edit on GitHub

  1. Step 1

  2. Step 2

  3. Step 2

  4. Step 3

  1. Step 1

  2. Step 2

  3. Step 2

  4. Step 3

  • Svelte
<script>
  import { Indicator } from 'flowbite-svelte'
</script>

<ol class="flex items-center">
    <li class="relative w-full mb-6">
        <div class="flex items-center">
            <Indicator size="xl" color="none" class="bg-blue-200 dark:bg-blue-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
                <svg aria-hidden="true" class="w-4 h-4 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            </Indicator>
            <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
        </div>
        <div class="mt-3">
            <h3 class="font-medium text-gray-900 dark:text-white">Step 1</h3>
        </div>
    </li>
    <li class="relative w-full mb-6">
        <div class="flex items-center">
            <Indicator size="xl" color="none" class="bg-blue-200 dark:bg-blue-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
                <svg aria-hidden="true" class="w-4 h-4 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            </Indicator>
            <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
        </div>
        <div class="mt-3">
            <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
        </div>
    </li>
    <li class="relative w-full mb-6">
        <div class="flex items-center">
            <Indicator size="xl" color="none" class="bg-blue-200 dark:bg-blue-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
                <svg aria-hidden="true" class="w-4 h-4 text-blue-600 dark:text-blue-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
            </Indicator>
            <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
        </div>
        <div class="mt-3">
            <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
        </div>
    </li>
    <li class="relative w-full mb-6">
        <div class="flex items-center">
            <Indicator size="xl" color="gray" class="dark:bg-gray-700 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
                <svg aria-hidden="true" class="w-3 h-3 text-gray-800 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </Indicator>
        </div>
        <div class="mt-3">
            <h3 class="font-medium text-gray-900 dark:text-white">Step 3</h3>
        </div>
    </li>
</ol>
<ol class="flex items-center">
    <li class="relative w-full mb-6">
        <div class="flex items-center">
            <Indicator size="xl" color="none" class="bg-blue-200 dark:bg-blue-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
                <Indicator color="blue"/>
            </Indicator>
            <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
        </div>
        <div class="mt-3">
            <h3 class="font-medium text-gray-900 dark:text-white">Step 1</h3>
        </div>
    </li>
    <li class="relative w-full mb-6">
        <div class="flex items-center">
            <Indicator size="xl" color="none" class="bg-blue-200 dark:bg-blue-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
                <Indicator color="blue"/>
            </Indicator>
            <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
        </div>
        <div class="mt-3">
            <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
        </div>
    </li>
    <li class="relative w-full mb-6">
        <div class="flex items-center">
            <Indicator size="xl" color="none" class="bg-blue-200 dark:bg-blue-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
                <Indicator color="blue"/>
            </Indicator>
            <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700"></div>
        </div>
        <div class="mt-3">
            <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
        </div>
    </li>
    <li class="relative w-full mb-6">
        <div class="flex items-center">
            <Indicator size="xl" color="gray" class="dark:bg-gray-700 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
                <Indicator color="dark" class="dark:!bg-gray-300"/>
            </Indicator>
        </div>
        <div class="mt-3">
            <h3 class="font-medium text-gray-900 dark:text-white">Step 3</h3>
        </div>
    </li>
</ol>

Indicator position #

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

  Edit on GitHub
  • Svelte
<script>
  import { Indicator } from 'flowbite-svelte'
</script>

<div class="w-56 h-56 relative bg-gray-100 borer border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700" >
    <Indicator placement="top-left" color="gray"/>
    <Indicator placement="top-center" color="dark"/>
    <Indicator placement="top-right" color="blue"/>
    <Indicator placement="center-left" color="green"/>
    <Indicator placement="center" color="red"/>
    <Indicator placement="center-right" color="purple"/>
    <Indicator placement="bottom-left" color="indigo"/>
    <Indicator placement="bottom-center" color="yellow"/>
    <Indicator placement="bottom-right" color="teal"/>
</div>

Props #

The component has the following props, type, and default values. See types page for type information.

Indicator #

Name Type Default
color | 'gray' | 'dark' | 'blue' | 'green' | 'red' | 'purple' | 'indigo' | 'yellow' | 'teal' | 'none' 'gray'
rounded boolean false
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'md'
border boolean false
placement | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | undefined undefined
offset boolean true

References #

Flowbite Indicator