StatusLight

Accessible, unstyled state indicator for presence and health UI.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { StatusLight } from "@vizejs/ui/status-light";

Or copy the source into your project with vize lib pull status-light (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Presence indicators exposed as labelled images next to each member name. -->
<script setup lang="ts">
import { StatusLight } from "@vizejs/ui/status-light";
</script>

<template>
  <ul>
    <li>
      <StatusLight state="online" tone="success" aria-label="Online" />
      <span>Aiko Tanaka</span>
    </li>
    <li>
      <StatusLight state="away" tone="warning" aria-label="Away" />
      <span>Marcus Lee</span>
    </li>
    <li>
      <StatusLight state="offline" tone="neutral" aria-label="Offline" />
      <span>Priya Nair</span>
    </li>
  </ul>
</template>

API

StatusLight

Source: src/families/feedback/status-light/status-light.vue

Props

Slots

Exposed

Behavior

Normative state x input -> outcome table for status-light.vue (@vizejs/ui/status-light sidecar). Every row is proven by the named mounted-DOM, SSR/hydration, renderer, or compile-only type test. A row without a passing test is a contract violation.

Props

Slots

Expose

Data Attributes

ARIA Attributes

Parts

Styling Contract

StatusLight is headless: it emits no visual CSS, animation, SVG, color preset, or size preset. Consumers provide all pixels through the default slot or CSS using the root part and stable data attributes.