Vanilla ComponentsStatus 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
vue
<script setup lang="ts">
import { StatusIndicator } from '@flavorly/vanilla-components'
</script>
<template>
<PreviewWrapper>
<div class="h-5 w-4">
<StatusIndicator variant="red"/>
</div>
<div class="h-5 w-4">
<StatusIndicator variant="blue"/>
</div>
<div class="h-5 w-4">
<StatusIndicator variant="orange"/>
</div>
<div class="h-5 w-4">
<StatusIndicator variant="indigo"/>
</div>
</PreviewWrapper>
</template>
Props 📥
Props available for this component extending the default variant & global props.
| Prop | Description | Accepted Values | Default |
|---|---|---|---|
pulse | Enable/Disable pulse animation | boolean | false |