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, an optional badge slot, and an optional detail slot for block content under the line — the feed-row pattern a dashboard would otherwise hand-roll with a row and a colored span.

Basic Usage

Plain activity row

Maya Patel pushed 3 commits to main. 2 hours ago

<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:

Activity feed across kinds

CI deployed v2.4.0 to production. just now

Sam Rivera merged #412 into main. 10m ago

Lee Park commented on the billing spec. 1h ago

nightly backup completed. 3h ago

<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:

Activity row with a badge

Maya Patel shipped the export pipeline. 5m ago

deployed

<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>

Detail Slot

Use the detail slot for block content under the line — the fields a change touched, a quoted comment. It starts flush with the text above it:

Activity row with a detail block

Maya Patel updated the customer record. 12m ago

Status: Lead → Customer
Owner: Sam Rivera

<x-wirekit::activity-row kind="user" actor="Maya Patel" timestamp="12m ago">
    updated the customer record.
    <x-slot:detail>
        <x-wirekit::list>
            <x-wirekit::list.item>Status: Lead → Customer</x-wirekit::list.item>
            <x-wirekit::list.item>Owner: Sam Rivera</x-wirekit::list.item>
        </x-wirekit::list>
    </x-slot:detail>
</x-wirekit::activity-row>

Custom Kinds

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

// 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)',
        ],
    ],
],

Name a custom kind with kind-label. A screen reader announces the kind in place of the dot's color, and without a label it hears the key itself:

A custom kind falls back to the muted dot until configured

Release bot tagged a new release. now

<x-wirekit::activity-row kind="release" kind-label="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.
`kindLabel`	`string\|null`	`null`	What a screen reader hears for the kind. The built-in kinds are announced from the translation catalog in the page's language; any other kind is announced by its key unless this names it.
`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.
`detail`	Optional block content under the line, flush with the text above it.

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 built-in kinds are announced in the page's language; name a custom kind with kind-label.
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.

Activity Row

Was this page helpful?