Skip to content
On this page

Status Indicator

Little status indicators, with pulse animation, able to be used in any context, like buttons, cards, etc.

Preview & Playground 🖼️

Here you may find a preview of the component, with error & possible variants.

🏄 Click to expand the code
<script setup lang="ts">
import { StatusIndicator } from '@flavorly/vanilla-components'

    <div class="h-5 w-4">
      <StatusIndicator variant="red"/>
    <div class="h-5 w-4">
      <StatusIndicator variant="blue"/>
    <div class="h-5 w-4">
     <StatusIndicator variant="orange"/>
    <div class="h-5 w-4">
      <StatusIndicator variant="indigo"/>

Props 📥

Props available for this component extending the default variant & global props.

PropDescriptionAccepted ValuesDefault
pulseEnable/Disable pulse animationbooleanfalse

Released under the MIT License.