---
title: Activity Row
description: Activity-feed / timeline row with kind-colored dot, actor, timestamp, and badge slot
visibility: guest
draft: false
---

# Activity Row

A single row for activity feeds, audit logs, timelines, and changelogs. Renders a kind-colored leading dot, an optional bold actor, the activity content, an optional right-aligned timestamp, and an optional badge slot — the feed-row pattern dashboards previously hand-rolled with a `row` + colored span.

## Basic Usage

:::preview{title="Plain activity row"}
<x-wirekit::activity-row kind="commit" actor="Maya Patel" timestamp="2 hours ago">
    pushed 3 commits to <code>main</code>.
</x-wirekit::activity-row>
:::

## Kinds

The `kind` prop drives the leading dot color. Built-in kinds: `commit`, `merge`, `deploy`, `comment`, `system`, `user`:

:::preview{title="Activity feed across kinds"}
<x-wirekit::stack gap="none">
    <x-wirekit::activity-row kind="deploy" actor="CI" timestamp="just now">deployed <code>v2.4.0</code> to production.</x-wirekit::activity-row>
    <x-wirekit::activity-row kind="merge" actor="Sam Rivera" timestamp="10m ago">merged <code>#412</code> into main.</x-wirekit::activity-row>
    <x-wirekit::activity-row kind="comment" actor="Lee Park" timestamp="1h ago">commented on the billing spec.</x-wirekit::activity-row>
    <x-wirekit::activity-row kind="system" timestamp="3h ago">nightly backup completed.</x-wirekit::activity-row>
</x-wirekit::stack>
:::

## Badge Slot

Use the `badge` slot for a status pill alongside the activity:

:::preview{title="Activity row with a badge"}
<x-wirekit::activity-row kind="deploy" actor="Maya Patel" timestamp="5m ago">
    shipped the export pipeline.
    <x-slot:badge>
        <x-wirekit::badge intent="success">deployed</x-wirekit::badge>
    </x-slot:badge>
</x-wirekit::activity-row>
:::

## Custom Kinds

Add or recolor kinds in `config/wirekit.php` — the map is merged over the built-in defaults:

```php
// config/wirekit.php
'components' => [
    'activity-row' => [
        'kinds' => [
            // 1. Add a new kind keyed to any design-token color.
            'release' => 'var(--color-wk-warning)',
            // 2. Recolor a built-in kind.
            'comment' => 'var(--color-wk-info-text)',
        ],
    ],
],
```

:::preview{title="A custom kind falls back to the muted dot until configured"}
<x-wirekit::activity-row kind="release" actor="Release bot" timestamp="now">
    tagged a new release.
</x-wirekit::activity-row>
:::

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `kind` | `string` | `'system'` | Activity kind keyed into the dot-color map. Unknown kinds fall back to the muted dot. |
| `actor` | `string\|null` | `null` | Actor name, rendered bold at the start of the line. |
| `timestamp` | `string\|null` | `null` | Relative time, right-aligned and muted. |
| `scope` | `string\|null` | `null` | Personalization scope key. |

## Slots

| Slot | Description |
|------|-------------|
| default | The activity content (may contain inline markup like `<code>`). |
| `badge` | Optional status pill(s) rendered below the content. |

## Accessibility

- The kind dot is decorative (`aria-hidden="true"`); the kind is conveyed textually by a visually-hidden label, so the activity is distinguishable without color perception (WCAG 1.4.1).
- The actor + content read as a single line to assistive tech; the timestamp follows.

## Keyboard Interaction

Activity Row is presentational — it has no interactive behavior of its own. Links or buttons placed inside the content or badge slot own their own keyboard model.

## Pitfalls

- **Don't encode meaning in the dot color alone.** The `kind` is always announced as text; color is a redundant cue.
- **`kind` is open-ended.** An unknown kind doesn't error — it renders the muted fallback dot. Register custom kinds in config to color them.

## Design Tokens

| Token | Usage |
|-------|-------|
| `--color-wk-text` | Activity content. |
| `--color-wk-text-muted` | Timestamp + the default/unknown-kind dot. |
| `--color-wk-accent` / `--color-wk-success` | Built-in kind dot colors. |