Components / Activity messages

Activity messages

Explore every variant and expand each example’s formatted usage code.

Activity messages

Chat-style messages with an avatar, timestamp, content and actions.

↗

Chat-style activity

Priya Shah updated the owner

Portfolio ownership transferred to Sam Carter.

4:01 PM

<ActivityMessage
  avatar={
    <Avatar
      value="https://i.pravatar.cc/96?img=9"
      initials="PS"
      label="Priya Shah"
    />
  }
  timestamp={<time dateTime="2026-10-25T16:01:00">4:01 PM</time>}
  header={
    <>
      <strong>Priya Shah</strong> updated the owner
    </>
  }
  actions={<Button variant="link">View change ↗</Button>}
>
  <p>Portfolio ownership transferred to Sam Carter.</p>
</ActivityMessage>