Skip to main content

ActivityItem

Implemented

Activity feed row — a semantic <li> with an 8px tone dot, a bold actor name, action text and a muted relative time in a <time> element. Consumers own the surrounding list (and any aria-live region).

Categorymolecules
Sourcepatterns/molecules/activityitem.html
AI HintUse for a single activity-feed row. Compose rows via the ActivityList organism, which maps ActivityKind to tone and label. Announce new rows by marking the parent list aria-live — the molecule carries no live attribute by design.

Activity feed row — semantic <li> with an 8px tone dot, bold actor, action text and a muted relative time in a <time> element. Composed by ActivityList.

ActivityItem

Content & Layout — Family 6 (molecule)

Renders a single <li> row. The tone dot is decorative (aria-hidden); consumers own the surrounding list and any aria-live region.

  • Festival Jazz Montréal 2 billets vendus (Caisse 4)
  • Lionel Paquin remboursé la commande #1042 (48,00 $)
  • Code LAISSEZ20 appliqué 4 fois — Saison OSM
  • Billetterie Lion d’Or confirmation envoyée à 87 acheteurs
  • Place des Festivals 12 arrivées — porte 2

This component supports light and dark mode.

Usage

The component renders the <li> itself — always use it inside a semantic <ul>. For a complete feed section (heading, caption, kind → tone mapping, empty state), compose it via ActivityList.

import { ActivityItem } from '@epasslive/design-system'

<ul role="list" className="divide-y divide-ep-border">
  <ActivityItem actor="Festival Jazz Montréal" action="2 billets vendus" time="il y a 2 min" tone="success" />
  <ActivityItem actor="Lionel Paquin" action="remboursé la commande #1042" time="il y a 18 min" tone="error" />
</ul>

Props

Prop
Type
Default
Description
actor*
string
—

Actor or entity name, bolded (e.g. ‘Marie-Ève L.’).

action*
string
—

Action description after the actor (e.g. ‘refunded order #1042’).

time*
string
—

Pre-formatted relative time (e.g. ‘2 min ago’) — rendered in a muted <time> element, no datetime attribute.

tone
'info' | 'success' | 'warning' | 'error' | 'neutral'
'neutral'

Category dot color (semantic tokens; neutral = bg-ep-text-muted).

className
string
—

Extra classes merged onto the <li>.

Accessibility

  • renders <li> — must live inside a semantic <ul>/<ol>;
  • tone dot is aria-hidden decoration — never the sole differentiator (WCAG 1.4.1);
  • time is consumer-preformatted text in a <time> element (no datetime attribute);
  • no aria-live on the item — consumers mark the surrounding list (WCAG 4.1.3).

Props

Preview

ActivityItem

Prop
Type
Required
Default
Description
actor
string
Required
—

Actor or entity name, bolded (e.g. 'Marie-Ève L.').

action
string
Required
—

Action description after the actor (e.g. 'refunded order #1042').

time
string
Required
—

Pre-formatted relative time (e.g. '2 min ago'), rendered as-is in a <time> slot with no datetime attribute.

tone
"info" | "success" | "warning" | "error" | "neutral"
Optional
'neutral'

Semantic tone for the decorative dot (aria-hidden — never the sole information carrier).

className
string
Optional
—

Class appended to the <li> row.

Quick use:<ActivityItem />

Accessibility

ARIA rolelistitem

ARIA

1 rule

WAI-ARIA List Pattern

Rendered inside a semantic <ul> — the component emits <li> and must not be used standalone

a11y

1 rule

WCAG 1.3.1

Tone dot is decorative (aria-hidden='true'); time is consumer-preformatted text with no datetime attribute

Usage

Import

tsxSnippet
import { ActivityItem } from "@epasslive/design-system"

Example 1

tsxSnippet
<ActivityItem actor="Marie-Ève L." action="refunded order #1042" time="2 min ago" tone="error" />

Example 2

tsxSnippet
<ActivityItem actor="Guillaume" action="scanned ticket #A-1042" time="just now" />

Anti-patterns

— Do not render outside a semantic <ul> (role=listitem implies list context)

— Do not rely on tone alone to convey meaning — the dot is aria-hidden decoration

Design System v4.1.0 | ePassLive