[Components](https://oods-foundry.com/components) / lifecycle

# AuditEvent

Shows one recorded audit event and its time.

Generated from @oods/foundry 0.10.1

- Categories

  lifecycle

- Contexts

  timeline

- Readiness

  `react-and-vue`

## Playground

This component's contract doesn't list typed props, so the playground shows its documented example.

Documented example `audit-event-type-and-timestamp` : mount, one audit article with a machine-readable time, the event label and the detail.

The render follows the page's theme switch: light, dark or high contrast. Both frameworks render the same example.

The real AuditEvent, live

React

2026-09-05T12:00:00Z

user.updated

Display name changed

Vue

2026-09-05T12:00:00Z

user.updated

Display name changed

## Code

The documented example. HTML is the markup the React component renders for it, which @oods/component-styles styles.

**React**

```
import { AuditEvent } from '@oods/components-react';
import '@oods/component-styles/css';

export function Example() {
  return (
    <AuditEvent
      event="user.updated"
      timestamp="2026-09-05T12:00:00Z"
      detail="Display name changed"
    />
  );
}
```

## Props, slots and events

Contract version 1.1.0. Types are from the React declarations in @oods/components-react.

Props

| Prop | Type | Required | Documented example |
| - | - | - | - |
| `label` | `string \| undefined` | no | |
| `title` | `string \| undefined` | no | |
| `event` | `string \| undefined` | no | `user.updated` |
| `status` | `string \| undefined` | no | |
| `state` | `string \| undefined` | no | |
| `reason` | `string \| undefined` | no | |
| `text` | `string \| undefined` | no | |
| `timestamp` | `string \| undefined` | no | `2026-09-05T12:00:00Z` |
| `datetime` | `string \| undefined` | no | |
| `time` | `string \| undefined` | no | |
| `at` | `string \| undefined` | no | |
| `createdAt` | `string \| undefined` | no | |
| `updatedAt` | `string \| undefined` | no | |
| `detail` | `string \| undefined` | no | `Display name changed` |
| `description` | `string \| undefined` | no | |
| `message` | `string \| undefined` | no | |
| `from` | `string \| undefined` | no | |
| `to` | `string \| undefined` | no | |
| `code` | `string \| undefined` | no | |

### Slots

default

### Events

none

## States

timestamped, untimed

## Accessibility

- Role

  `article`

- How it gets its name

  `none` on `article`

### Keyboard

The contract lists no keyboard behaviour.

### Obligations in the contract

- One article per event with visible label text
- A timestamp is a time element with a machine-readable datetime

Mirrors renderAuditEvent over renderEventArticle with data-event-type=audit: the label reads label/title/event/status/state/reason/text (default Audit Event), the timestamp reads timestamp/datetime/time/at/createdAt/updatedAt, and the detail reads detail/description/reason/message/from/to/code, so a lone reason is both label and detail exactly as the HTML renderer shows it; authored children replace the generated article body. typeField lowers to event and timestampField to timestamp; timezoneParameter is consumed.

## Tokens

The token roles this component reads.

- `event.background`
- `event.border`
- `event.text`

## Readiness

The evidence recorded for this component, with its label.

`react-and-vue`: catalog_list gives this label when the React and Vue components have complete readiness evidence, but the sweep's generated apps don't use the component in both.

Readiness evidence

| Evidence | React | Vue |
| - | - | - |
| state | implemented-evidence-complete | implemented-evidence-complete |
| versioned contract | passed | passed |
| target implementation | passed | passed |
| package export | passed | passed |
| public declaration | passed | passed |
| dependency closure | passed | passed |
| framework scenario | passed | passed |
| accessibility | verified | verified |
| interaction | not-applicable | not-applicable |
| visual themes | verified | verified |

AuditEvent presents content and owns no focusable control or action; authored child actions remain the consumer's responsibility.

## Use your own

You can replace this component with your own React or Vue component. Map it, and generated code imports yours at the exact version you name. A contract report, run in a real browser, lists what your component met, what it didn't, and what wasn't checked.

The `component_map` call, with the parts in angle brackets yours to fill:

```
{
  "action": "create",
  "apply": true,
  "externalSystem": "<your design system>",
  "externalComponent": "<YourAuditEvent>",
  "oodsTraits": [
    "<trait names>"
  ],
  "substitution": {
    "component": "AuditEvent",
    "react": {
      "package": "<your-package>/react",
      "version": "<exact version>",
      "export": "<YourAuditEvent>"
    },
    "vue": {
      "package": "<your-package>/vue",
      "version": "<exact version>",
      "export": "<YourAuditEvent>"
    }
  }
}
```

## How this page was made

Generated at build from the published data, each source with the hash of what was read. [The page's manifest](https://oods-foundry.com/components/audit-event/manifest.json).

- **Contract**: `@oods/component-contracts@0.10.1 componentContracts.AuditEvent` `sha256:99b183d0aff8…`
- **Documented example**: `@oods/component-contracts@0.10.1 sharedScenarios audit-event-type-and-timestamp` `sha256:df737b62895e…`
- **Catalog entry (catalog_list)**: `generated/0.10.1/system/catalog.json AuditEvent` `sha256:6cc5d23b992a…`
- **React readiness**: `@oods/components-react@0.10.1 readiness AuditEvent` `sha256:59c2e629dd83…`
- **Vue readiness**: `@oods/components-vue@0.10.1 readiness AuditEvent` `sha256:f48045003fea…`
- **Prop types**: `generated/0.10.1/components/prop-types.json AuditEvent` `sha256:754fafe723e4…`