# Status Mark

A small status glyph for an agent's task list. A pending task shows a dashed ring. When it runs, the dashes join into a spinning arc, or into a progress arc when you pass `progress`. On done the ring closes, turns green, draws a check and strikes the label through; on failure it turns red and draws a cross; a cancelled task fades back to a dashed ring with a cross. The demo plays a full lifecycle on a loop; change any status control in the panel to take over by hand.

<demo-status-mark>



</demo-status-mark>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/status-mark.json"
```

## Usage

```vue
<script setup lang="ts">
  import { ref } from 'vue';
  import StatusMark from '~/components/ui/status-mark/StatusMark.vue';
  import type { StatusMarkStatus } from '~/components/ui/status-mark/types';

  const status = ref<StatusMarkStatus>('running');
  const progress = ref<number | undefined>(0.4);
</script>

<template>
  <StatusMark
    :status="status"
    :progress="progress"
    label="Draft supplier emails"
    :size="28"
    :font-size="16"
  />
</template>
```

Leave `progress` undefined while running to get the spinning arc. Leave out `label` (and the slot) to render the glyph alone.

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        status
      </code>
    </td>
    
    <td>
      <code>
        'pending' | 'running' | 'done' | 'failed' | 'cancelled'
      </code>
    </td>
    
    <td>
      <code>
        'pending'
      </code>
    </td>
    
    <td>
      Which state the mark shows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        progress
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      0 to 1. While running, fills the ring to this share instead of spinning.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Task text beside the mark.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'currentColor'
      </code>
    </td>
    
    <td>
      Ink for the ring and the label.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        done-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#22c55e'
      </code>
    </td>
    
    <td>
      The check and its ring.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        error-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ef4444'
      </code>
    </td>
    
    <td>
      The cross and its ring on failure.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        20
      </code>
    </td>
    
    <td>
      Glyph size in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stroke-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Stroke width in the 24-unit viewBox.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dashes
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        8
      </code>
    </td>
    
    <td>
      Dashes in the pending ring.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        font-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        14
      </code>
    </td>
    
    <td>
      Label size in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spin-duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1100
      </code>
    </td>
    
    <td>
      Milliseconds per spin while running without progress.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        arc-length
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.68
      </code>
    </td>
    
    <td>
      Share of the ring the spinning arc covers.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        draw-duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        240
      </code>
    </td>
    
    <td>
      Milliseconds to draw the check or cross.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fill-opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.06
      </code>
    </td>
    
    <td>
      Tint inside the ring when done or failed.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        strike
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Strikes the label through when done.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        strike-delay
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        60
      </code>
    </td>
    
    <td>
      Extra delay before the strike, in ms.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the root.
    </td>
  </tr>
</tbody>
</table>

## Slots

<table>
<thead>
  <tr>
    <th>
      Slot
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        default
      </code>
    </td>
    
    <td>
      Rich label content. Overrides the <code>
        label
      </code>
      
       prop.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- With a label, a visually hidden prefix reads the state first, for example "In progress, 62%: Draft supplier emails". The glyph is hidden from assistive tech.
- Without a label, the SVG has `role="img"` and an `aria-label` with the state.
- With `prefers-reduced-motion`, the spinner becomes a slow breathing ring, and the check, cross and strike fade in instead of drawing.
- Ported from [React Bits](https://reactbits.dev/micro/status-mark) by David Haz.