# StatusDot

Compact presence/status indicator. Pair with visible text or an `aria-label` — the dot alone is decorative.

## Examples

### Default

A filled success dot labeled for assistive tech.

```tsx
import { StatusDot } from '@var-ui/react';

<StatusDot tone="success" appearance="filled" aria-label="Online" />
```

```astro
---
import { StatusDot } from '@var-ui/astro';
---
<StatusDot tone="success" appearance="filled" aria-label="Online" />
```

```html
<span class="var-ui-status-dot" data-tone="success" data-appearance="filled" role="img" aria-label="Online"></span>
```

### Tones and pulse

Use semantic `tone`s for status, and `pulse` for in-progress states (respects reduced motion).

```tsx
import { StatusDot } from '@var-ui/react';

<span>
  <StatusDot tone="success" aria-label="Online" /> Online
</span>
<span>
  <StatusDot tone="info" pulse aria-label="Syncing" /> Syncing
</span>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| aria-label | string \| undefined | no |  |  |
| className | string \| undefined | no |  |  |
| appearance | StatusDotAppearance \| undefined | no |  |  |
| pulse | boolean \| undefined | no |  |  |
| tone | ButtonTone \| undefined | no |  |  |

## Accessibility

Provide an `aria-label` when the meaning isn’t in adjacent text (sets `role="img"`). Prefer visible labels for color-blind users; `pulse` animation is disabled under `prefers-reduced-motion`.