# ChatMessageMetadata

Thin composition of the existing `Timestamp` with optional status content (e.g. "Read") — no dedicated recipe. Typically passed to `ChatMessage`'s `metadata` prop. See [ChatMessage](/components/chat-message) for the full message wiring.

## Examples

### Default

There is no `@var-ui/astro` ChatMessageMetadata — Astro and HTML show `Timestamp` + status via core recipes.

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

<ChatMessageMetadata date={new Date()} format="time" status="Read" />
```

```astro
---
// No @var-ui/astro ChatMessageMetadata — Timestamp + status via core recipes.
import { stack, textBlock } from '@var-ui/core';

const row = stack({ direction: 'row', gap: 'xs', align: 'center', justify: 'start', wrap: 'nowrap' });
const time = textBlock({ size: 'sm', tone: 'secondary' });
---

<div class:list={[row]}>
  <time class:list={[time]} datetime="2026-07-19T21:35:00.000Z">2:35 PM</time>
  Read
</div>
```

```html
<div data-direction="row" data-gap="xs" data-align="center" data-justify="start" data-wrap="nowrap" class="var-ui-stack"><time data-size="sm" data-tone="secondary" data-weight="normal" data-line-clamp="false" class="var-ui-text-block" datetime="2026-07-19T21:35:00.000Z" title="Jul 19, 2026, 2:35 PM">2:35 PM</time>Read</div>
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| date | string \| number \| Date | yes |  | Passed straight to `Timestamp`. |
| className | string \| undefined | no |  | Additional CSS class names merged onto the root element. |
| format | "date" \| "time" \| "relative" \| "datetime" \| undefined | no | relative | Passed straight to `Timestamp`. |
| status | ReactNode | no |  | Optional status content shown alongside the timestamp (e.g. "Read"). |

## Accessibility

The timestamp and status are rendered as plain text content, so they're exposed to assistive technology in the same way as any other inline text within the message row.