Activity

ActivityList and ActivityItem show a feed of events, newest first: the person, the time and what they did.

import { ActivityItem, ActivityList } from '@beyul/sulmu-ui'

Source · Figma

Examples

• SJ
  Sandra Johnson5m

  Deleted role “Guest Viewer” from team Marketing Team
• PB
  Phillip Botosh36m

  Changed permissions for “Developer” role in Backend Team
• HG
  Hanna Gouse8:35am - Jul 17, 2025

  Created new role “Project Reviewer”

import { ActivityItem, ActivityList, Avatar } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <div style={{ maxWidth: 420 }}>
      <ActivityList>
        <ActivityItem
          name="Sandra Johnson"
          time="5m"
          avatar={<Avatar size="xs" name="Sandra Johnson" />}
        >
          Deleted role “Guest Viewer” from team <a href="#team">Marketing Team</a>
        </ActivityItem>
        <ActivityItem
          name="Phillip Botosh"
          time="36m"
          avatar={<Avatar size="xs" name="Phillip Botosh" />}
        >
          Changed permissions for “<a href="#role">Developer</a>” role in{' '}
          <a href="#team">Backend Team</a>
        </ActivityItem>
        <ActivityItem
          name="Hanna Gouse"
          time="8:35am - Jul 17, 2025"
          avatar={<Avatar size="xs" name="Hanna Gouse" />}
        >
          Created new role “<a href="#role">Project Reviewer</a>”
        </ActivityItem>
      </ActivityList>
    </div>
  )
}

Props

ActivityItem

Prop	Type	Default	Description
name*	ReactNode	-	Who did it.
time	ReactNode	-	When, already formatted: "5m", "8:35am - Jul 17, 2025".
avatar	ReactNode	-	<Avatar size="xs" /> of the person.
children	ReactNode	-	What they did. Links inside are styled in the brand colour.

ActivityItem also accepts every li attribute. ActivityList has no props of its own; it accepts every ul attribute.

Usage notes

• The list is a <ul> and each item an <li>.
• time is shown as given, so format it first (“5m”, “8:35am - Jul 17, 2025”).
• Links inside the item text are styled in the brand colour.