ComponentsEnterpriseAuditLog

AuditLog

AuditLog presents immutable system and user events in a chronological, inspectable timeline.

Date groups5 tones3 variants3 sizesCustom formatting

Overview

Use AuditLog to make security, governance, configuration, and operational changes traceable without turning the component into a general collaboration feed.

Workspace activity

Live preview

Select an event to mirror the interaction and confirmation path.

Aug 14, 2026

Aug 13, 2026

Selected: No item selected

WorkspaceAuditLog.tsx
tsx
import { AuditLog, type AuditLogEntry } from 'omverse-ui'
 
const entries: readonly AuditLogEntry[] = [
{
"id": "evt_2048",
"actor": "Maya Chen",
"action": "approved",
"target": "Production access",
"timestamp": "2026-08-14T10:42:00+05:30",
"tone": "success",
"description": "The request passed the two-reviewer policy."
},
{
"id": "evt_2047",
"actor": "Noah Williams",
"action": "changed the owner of",
"target": "Cloud migration",
"timestamp": "2026-08-14T09:18:00+05:30",
"tone": "info",
"metadata": "Owner: Priya Shah → Maya Chen"
},
{
"id": "evt_2046",
"actor": "Policy service",
"action": "blocked an export from",
"target": "Customer accounts",
"timestamp": "2026-08-13T17:04:00+05:30",
"tone": "warning",
"description": "The export included restricted identity fields."
}
]
 
<AuditLog
entries={entries}
groupByDate
variant="bordered"
/>

Anatomy

Each event combines an outcome marker, actor-action statement, affected target, timestamp, and optional evidence in a chronological rail.

14 August 2026
✓Maya Chen approved Production accessPassed the two-reviewer policy.
!Policy service blocked an exportFields: customer_email
12345
  1. 1
    Date group

    Segments chronology into scannable localized dates.

  2. 2
    Event marker

    Identifies event type or outcome while the rail preserves sequence.

  3. 3
    Event statement

    Connects the actor, action, and affected target.

  4. 4
    Timestamp

    Provides a visible time and machine-readable value.

  5. 5
    Evidence

    Adds a reason, changed value, or policy detail when useful.

When to use

Use AuditLog when people must establish who or what changed a governed resource and when it happened.

Recommended

  • Trace administrative changes

    Record access, ownership, policy, configuration, and lifecycle events.

  • Support investigation

    Expose stable event identity and relevant evidence for review.

  • Explain automated decisions

    Represent services and policy engines as actors with clear outcomes.

When not to use

AuditLog is not a substitute for social feeds, notifications, or dense analytical exploration.

Avoid

  • Do not use as a social feed

    Use a purpose-built activity feed for comments, reactions, and collaboration.

  • Do not replace notifications

    Use Toast or a notification center for time-sensitive awareness.

  • Do not force large-scale analysis

    Use DataTable when events need columns, bulk scanning, sorting, or export.

Variants

Container and scale adapt the same event grammar to page regions and elevated review surfaces.

Plain

Integrates into a page region with an existing boundary.

Bordered

Defines a standalone audit region.

Raised

Supports an elevated review or investigation surface.

Sizes

Small, medium, and large tune spacing and marker scale.

States

AuditLog separates data-resolution states from semantic event outcomes.

StateTriggerVisual responseInteraction
PopulatedEvents are availableGrouped chronological listInspect or open entries
Interactive entryhref or selection handler existsHover and focus surfaceOpens event detail
LoadingEvents are resolvingProgress and loading messageEntries are withheld
EmptyNo events existNeutral no-activity messageNo event action
ErrorRetrieval failsAssertive error feedbackRecovery remains application-owned

Behavior

AuditLog owns chronology and event presentation while applications own retrieval, authorization, pagination, filtering, and retention.

Date grouping

Events retain their supplied order and group under localized date headings.

Time formatting

Visible time can be localized or made relative without losing datetime data.

Actor identity

People, integrations, and services use the same explicit actor slot.

Inspection

An href or selection handler makes the complete event target actionable.

Accessibility

AuditLog uses date sections, ordered lists, headings, and time elements so chronology remains understandable without visual markers.

  • Keep event statements complete when read without the marker or timeline rail.
  • Use a real time element with an ISO-compatible datetime value.
  • Preserve a logical newest-first or oldest-first order and document the chosen convention.
  • Give custom actor visuals and event markers appropriate text alternatives only when they add meaning.
  • Do not communicate event outcome through color alone.
  • Ensure an interactive event has one clear focus target and a descriptive accessible name.

Content guidelines

Event language should be factual, durable, and consistent enough to support investigation months later.

Name the actor

Use a recognizable person, integration, or service identity.

ExamplePolicy service

Use past-tense actions

Describe the completed event directly.

Examplechanged the owner of

Name the target

Identify the affected resource, not just its type.

ExampleCloud migration

Record evidence

Add relevant changed values or policy reasons without interpretation.

ExampleOwner: Priya Shah → Maya Chen

Examples

Use examples that mirror operational review and incident workflows.

Review workflow with immutable audit context

Live preview

Open a selected event and keep a stable action log for investigators.

Aug 14, 2026

Aug 13, 2026

Selected: No item selected

ReviewedAction.tsx
tsx
import { AuditLog, type AuditLogEntry } from 'omverse-ui'
 
const entries: readonly AuditLogEntry[] = [
{
"id": "evt_2048",
"actor": "Maya Chen",
"action": "approved",
"target": "Production access",
"timestamp": "2026-08-14T10:42:00+05:30",
"tone": "success",
"description": "The request passed the two-reviewer policy."
},
{
"id": "evt_2047",
"actor": "Noah Williams",
"action": "changed the owner of",
"target": "Cloud migration",
"timestamp": "2026-08-14T09:18:00+05:30",
"tone": "info",
"metadata": "Owner: Priya Shah → Maya Chen"
},
{
"id": "evt_2046",
"actor": "Policy service",
"action": "blocked an export from",
"target": "Customer accounts",
"timestamp": "2026-08-13T17:04:00+05:30",
"tone": "warning",
"description": "The export included restricted identity fields."
}
]
 
<AuditLog
entries={entries}
groupByDate
variant="bordered"
/>

Props / API

AuditLog extends div attributes; AuditLogEntry defines event identity, actor, action, target, timestamp, evidence, marker, and optional destination.

Props

PropTypeDefaultDescription
entriesreadonly AuditLogEntry[]requiredOrdered events, normally newest first.
groupByDatebooleantrueGroups events under localized calendar dates.
formatTimestamp(timestamp) => ReactNodelocalized timeFormats the event time shown to people.
formatDate(timestamp) => ReactNodelocalized dateFormats date group headings.
loadingbooleanfalseShows activity while events resolve.
loadingStateReactNode'Loading activity…'Replaces the default loading message.
emptyStateReactNode'No activity to show.'Replaces the default no-events message.
errorStateReactNodeundefinedDisplays a retrieval failure instead of entries.
onEntrySelect(entry) => voidundefinedHandles selection for entries without an href.
variant'plain' | 'bordered' | 'raised''plain'Controls container emphasis.
size'sm' | 'md' | 'lg''md'Controls event spacing, type, and marker scale.