<script setup lang="ts">
import { ref } from 'vue';
import { StatusInk } from '@status-ink/vue';
import '@status-ink/vue/style.css';

const status = ref('Loading');
</script>

<template>
  <StatusInk aria-live="polite" :status="status" />
</template>

Use autonomous fallback statuses when your application has no real progress updates yet:

<script setup lang="ts">
import { StatusInk } from '@status-ink/vue';
</script>

<template>
  <StatusInk :hold-ms="2000" :statuses="['Loading', 'Indexing', 'Ready']" />
</template>

Use useStatusInk(...) when you want to own the markup. The composable and component stop their active runner when their Vue scope is disposed.

Reduced motion defaults to auto and follows prefers-reduced-motion. It preserves status changes while disabling effects and shimmer. Pass :reduced-motion="true" or false to override it, and :shimmer="false" to disable shimmer independently. Status text is quiet to assistive technology by default; opt into aria-live="polite" or "assertive" only for meaningful announcements.

Open the Vue example in StackBlitz

Documentation · Live demo · Issues · npm