MessageHeader
The header row for a message group, showing an avatar, sender name, and timestamp. Used to introduce a set of messages from the same sender in a conversation thread.
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { MessageHeader } from '@adaptavant/eds-core';
Default
Pass avatar props (including the sender name) and a timestamp.
Robert
8:24 AM
<MessageHeader
avatar={{ name: 'Robert' }}
timestamp="8:24 AM"
/>
API Reference
MessageHeader
| Prop | Default | Description |
|---|---|---|
avatar | _ | ReactNode | { name: string; size?; status?; isGuest?; icon?; imageSrc? }Either props forwarded to Avatar (size defaults to 24; provide icon to render an AvatarIcon), or a custom React element. When a custom element is provided, name is not rendered separately — include it in the element if needed. |
avatarWrapper? | _ | (identity: ReactElement) => ReactNodeWraps the identity cluster (avatar + name) so it can act as a trigger for a Popover, Tooltip, or other interactive element. |
timestamp | _ | ReactNodeThe timestamp label (e.g. "8:24 AM"). |
Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
MessageHeader parts
Visitor
8:24 AM
<MessageHeader
classNames={{
name: 'text-accent',
timestamp: 'text-critical'
}}
avatar={{ name: 'Visitor' }}
timestamp="8:24 AM"
/>
| Part | Description |
|---|---|
root | The header row container. |
identity | The cluster that wraps the avatar and sender name. |
name | The sender name. |
timestamp | The timestamp. |