Usage

Import the component from its dedicated entry. Structural styles are loaded automatically.

<script setup lang="ts">
import { StatusDot } from '@astryx-vue/core/StatusDot'
</script>

<template>
  <StatusDot label="Online" variant="success" />
</template>

Best practices

Guidance	Practice
Recommended	Always provide label; screen readers announce it via aria-label.
Recommended	Use the dot as a supporting signal alongside a visible text label.
Recommended	Use isPulsing for live, ongoing activity such as streaming or syncing.
Don't	Rely on color alone for critical status. Color is not perceivable by everyone.
Don't	Use many pulsing dots on the same screen; it creates visual noise.

Examples

Variants

Status dots come in neutral, info, success, warning, and error semantic variants.

Pulsing

Set isPulsing to make the dot pulse, indicating an active state.