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 lang="ts">
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. Pre-set colors are 'brand'(default) | 'neutral' | 'dark' | 'success' | 'danger' | 'purple' | 'indigo' | 'warning' | 'teal'. Use class prop to add a preferred color.
- Svelte
<script lang="ts">
import { Indicator } from "flowbite-svelte";
</script>
<Indicator />
<Indicator color="neutral" />
<Indicator color="dark" />
<Indicator color="success" />
<Indicator color="danger" />
<Indicator color="purple" />
<Indicator color="indigo" />
<Indicator color="warning" />
<Indicator color="teal" />
<Indicator class="bg-yellow-400" />
<Indicator class="bg-orange-400" />Legend indicator #
This example can be used as a legend indicator for charts to also add a text next to the bullet point.
- Svelte
<script lang="ts">
import { Indicator } from "flowbite-svelte";
</script>
<span class="flex items-center"><Indicator size="sm" class="me-1.5 bg-orange-400" />Visitors</span>
<span class="flex items-center"><Indicator size="sm" color="purple" class="me-1.5" />Sessions</span>
<span class="flex items-center"><Indicator size="sm" color="indigo" class="me-1.5" />Customers</span>
<span class="flex items-center"><Indicator size="sm" color="teal" class="me-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.
- Svelte
<script lang="ts">
import { Indicator, Button } from "flowbite-svelte";
import { EnvelopeSolid } from "flowbite-svelte-icons";
</script>
<Button size="lg" class="relative">
<EnvelopeSolid class="me-2 h-6 w-6" />
<span class="sr-only">Notifications</span>
Messages
<Indicator color="danger" border size="xl" placement="top-right">
<span class="text-xs font-bold text-white">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.
- Svelte
<script lang="ts">
import { Avatar } from "flowbite-svelte";
</script>
<Avatar src="/images/people/profile-picture-5.jpg" dot={{ color: "success", size: "lg", placement: "top-right" }} />
<Avatar src="/images/people/profile-picture-5.jpg" dot={{ color: "danger", size: "lg", placement: "top-right" }} />Badge indicator #
This example can be used to add an indicator inside of a badge component.
- Svelte
<script lang="ts">
import { Indicator, Avatar, Badge } from "flowbite-svelte";
</script>
<ul class="divide-default w-full max-w-sm divide-y">
<li class="py-3 sm:py-4">
<div class="flex items-center space-x-3 rtl:space-x-reverse">
<Avatar src="/images/people/profile-picture-5.jpg" alt="Neil image" />
<div class="min-w-0 flex-1">
<p class="text-heading truncate text-sm font-semibold">Neil Sims</p>
<p class="text-body truncate text-sm">email@flowbite.com</p>
</div>
<Badge color="success" class="px-2.5 py-0.5">
<Indicator color="success" size="xs" class="me-1" />Available
</Badge>
</div>
</li>
<li class="py-3 sm:py-4">
<div class="flex items-center space-x-3 rtl:space-x-reverse">
<div class="shrink-0">
<Avatar src="/images/people/profile-picture-4.jpg" alt="Bonnie image" />
</div>
<div class="min-w-0 flex-1">
<p class="text-heading truncate text-sm font-semibold">Bonnie Green</p>
<p class="text-body truncate text-sm">email@flowbite.com</p>
</div>
<Badge color="danger" class="px-2.5 py-0.5">
<Indicator color="danger" size="xs" class="me-1" />Unavailable
</Badge>
</div>
</li>
</ul>Stepper indicator #
You can also use the indicators inside of a stepper component when completing a form element.
- Svelte
<script lang="ts">
import { Indicator } from "flowbite-svelte";
import { CheckCircleSolid } from "flowbite-svelte-icons";
</script>
<ol class="flex items-center">
{#each [1, 2, 2, 3] as step, i}
<li class="relative mb-6 w-full">
<div class="flex items-center">
<Indicator size="xl" color={i < 3 ? undefined : "neutral"} class={`ring-buffer z-10 shrink-0 ring-0 sm:ring-8 ${i < 3 ? "bg-brand" : "bg-neutral-tertiary"}`}>
{#if i === 3}
<CheckCircleSolid class="text-heading h-6 w-6" />
{:else}
<CheckCircleSolid class="h-6 w-6 text-white" />
{/if}
</Indicator>
{#if i < 3}
<div class="bg-base flex h-0.5 w-full"></div>
{/if}
</div>
<div class="mt-3">
<h3 class="text-heading font-medium">Step {step}</h3>
</div>
</li>
{/each}
</ol>
<ol class="flex items-center">
{#each [1, 2, 2, 3] as step, i}
<li class="relative mb-6 w-full">
<div class="flex items-center">
<Indicator size="xl" color={i < 3 ? undefined : "neutral"} class={`ring-buffer z-10 shrink-0 ring-0 sm:ring-8 ${i < 3 ? "bg-brand-subtle" : "bg-neutral-tertiary"}`}>
<Indicator color={i < 3 ? "warning" : "success"} />
</Indicator>
{#if i < 3}
<div class="bg-base flex h-0.5 w-full"></div>
{/if}
</div>
<div class="mt-3">
<h3 class="text-heading font-medium">Step {step}</h3>
</div>
</li>
{/each}
</ol>Indicator position #
Use these examples to position the indicator component anywhere relative to the parent element.
- Svelte
<script lang="ts">
import { Indicator } from "flowbite-svelte";
</script>
<div class="rounded-base border-default bg-neutral-tertiary relative h-56 w-56 border">
<Indicator placement="top-left" color="danger" />
<Indicator placement="top-center" color="warning" />
<Indicator placement="top-right" color="success" />
<Indicator placement="center-left" color="dark" />
<Indicator placement="center" color="neutral" />
<Indicator placement="center-right" color="purple" />
<Indicator placement="bottom-left" color="indigo" />
<Indicator placement="bottom-center" class="bg-yellow-400" />
<Indicator placement="bottom-right" color="teal" />
</div>Component data #
The component has the following props, type, and default values. See types page for type information.