component
Status
A service's state by shape — circle, triangle, square, dashed ring, hollow ring — so it survives grayscale.
Each state has its own shape, so status reads without color: in grayscale, for color-blind readers, on a bad projector. Color only reinforces it. The label is always there, too.
HealthyNear limitSuspendedUnreachableQuiet
<script setup lang="ts">
const states = ['healthy', 'warn', 'suspended', 'unreachable', 'quiet'] as const
</script>
<template>
<div class="flex items-center gap-4 flex-wrap">
<ZStatus v-for="state in states" :key="state" :state="state" />
</div>
</template>Pills
pill puts the dot and label on a tinted chip, for a status inside a table row or a card header.
HealthyNear limitSuspendedUnreachableQuiet
<script setup lang="ts">
const states = ['healthy', 'warn', 'suspended', 'unreachable', 'quiet'] as const
</script>
<template>
<div class="flex items-center gap-2 flex-wrap">
<ZStatus v-for="state in states" :key="state" :state="state" pill />
</div>
</template>Glow
glow lights the healthy dot with a soft glow in its own color, a way of saying "live". The other states stay unlit.
HealthyHealthy
<template>
<div class="flex items-center gap-4">
<ZStatus state="healthy" glow />
<ZStatus state="healthy" pill glow />
</div>
</template>API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| glow | boolean | false | — |
| pill | boolean | false | — |
| state | "healthy" | "warn" | "suspended" | "unreachable" | "quiet" | "healthy" | — |
Slots
| Slot | Description |
|---|---|
| default | — |