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

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>

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

A custom kind falls back to the muted dot until configured

Release bot tagged a new release. now

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

Was this page helpful?

What was missing? (optional)

Voting requires cookies or local storage. What we store