# ElapsedTime

Time spent on a run or turn, ticking while it runs and fixed once it ends.

- **Use it for**: How long a run or turn has taken, live while it runs.
- **Not for**: A date or a schedule. Try [StatusBadge](https://unseenui.com/components/status-badge/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { ElapsedTime } from '@stackunseen/ui';
import { StatusBadge } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<ElapsedTime startedAt={turn.startedAt} endedAt={turn.endedAt} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `durationMs` | `number` | Host-measured duration in milliseconds. |
| `endedAt` | `string \| number \| Date` | When it ended. |
| `startedAt` (required) | `string \| number \| Date` | When the work started (a Date, an ISO string or epoch milliseconds). |

## Keyboard

Inert content. It is not a live region, so it never interrupts a screen reader.

## Works with

[Card](https://unseenui.com/components/card/), [Table](https://unseenui.com/components/table/), [Tag](https://unseenui.com/components/tag/), [DiffStat](https://unseenui.com/components/diff-stat/), [Numeric](https://unseenui.com/components/numeric/), [Kbd](https://unseenui.com/components/kbd/), [DotRing](https://unseenui.com/components/dot-ring/), [DotBars](https://unseenui.com/components/dot-bars/), [WeekStrip](https://unseenui.com/components/week-strip/), [HeatKeys](https://unseenui.com/components/heat-keys/), [Sparkline](https://unseenui.com/components/sparkline/), [BarList](https://unseenui.com/components/bar-list/)

Page: https://unseenui.com/components/elapsed-time/