Ermine UI

Status

A coloured dot beside a word or two: live, paused, failed, in stock.

Source on GitHub

Install

If this is the first component in the project, set up once. This writes ermine.json and copies the theme stylesheet. The installation guide covers Vue, Nuxt and Astro.

npx ermineui init
pnpm dlx ermineui init
yarn dlx ermineui init
bunx ermineui init

Then add the component:

npx ermineui add status
pnpm dlx ermineui add status
yarn dlx ermineui add status
bunx ermineui add status

That copies 2 files into src/components/ui/status/. Files you already have are kept.

Use

import { Status } from '@/components/ui/status'
<script setup lang="ts">
import { Status } from '@/components/ui/status'
</script>

<template>
  <Status />
</template>

In Nuxt, with the auto-import setting, the tags work in templates without the import. In Astro, use it inside a Vue island. The props are documented in the source below, on each one.

What gets copied

FileWhere it goes
Status.vuesrc/components/ui/status/Status.vue
index.tssrc/components/ui/status/index.ts

The folders are the suggested ones. ermine.json says where yours are.

Source

This is exactly what the command copies. To install by hand, create each file below and the helpers listed above.

Status.vue 85 lines
<script setup lang="ts">
withDefaults(
  defineProps<{
    /** What the dot's colour stands for. The words beside it carry the meaning; the colour only backs them up. */
    tone?: 'neutral' | 'success' | 'warning' | 'danger' | 'info'
    /** A slow ripple around the dot, for something happening right now. Still when motion is reduced. */
    pulse?: boolean
  }>(),
  { tone: 'neutral' },
)
</script>

<template>
  <span class="er-status" :data-tone="tone" :data-pulse="pulse ? '' : undefined">
    <span class="er-status-dot" aria-hidden="true" />
    <slot />
  </span>
</template>

<style>
@layer components {
  .er-status {
    --er-status-color: var(--er-muted-foreground);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .er-status[data-tone='success'] {
    --er-status-color: var(--er-success);
  }

  .er-status[data-tone='warning'] {
    --er-status-color: var(--er-warning);
  }

  .er-status[data-tone='danger'] {
    --er-status-color: var(--er-destructive);
  }

  .er-status[data-tone='info'] {
    --er-status-color: var(--er-info);
  }

  .er-status-dot {
    position: relative;
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--er-status-color);
  }

  .er-status[data-pulse] .er-status-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--er-status-color);
    animation: er-status-pulse 1.8s ease-out infinite;
  }

  @keyframes er-status-pulse {
    from {
      opacity: 0.6;
      scale: 1;
    }

    to {
      opacity: 0;
      scale: 2.75;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .er-status[data-pulse] .er-status-dot::after {
      animation: none;
      opacity: 0;
    }
  }
}
</style>
index.ts 3 lines
/** Status — a coloured dot beside a word or two: live, paused, failed, in stock. */
export { default as Status } from './Status.vue'