ActivityList

organisms

Live region wrapper for ActivityItem children. aria-live='polite' so new items are announced without interrupting. 12px gap between items.

ARIA Role: list

Demo

Demo for ActivityList (organisms)

Live region wrapper for ActivityItem children. aria-live='polite' so new items are announced without interrupting. 12px gap between items.

Props

PropTypeRequiredDefaultDescription
itemsActivityItemConfig[]Yes—

TypeScript Interface

interface ActivityListProps {
  items: ActivityItemConfig[];
  ariaLabel?: string;
  emptyState?: EmptyStateConfig;
}

Assertions (NASA Rule 5)

  • [type]items required, can be empty(NASA Rule 7)
  • [aria]aria-live='polite' and aria-atomic='false' on the container; empty state must be visible(WCAG 4.1.3)

Usage

Import

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

Basic

<Activitylist />

With Variants

<Activitylist variant="primary" size="md" />