Message

A single message row displaying text content with an optional trailing delivery status icon. Used within conversation threads to represent individual messages.

Group messages from the same sender under a MessageHeader, and indent the group yourself — Message does not apply its own left margin.

Figma LibraryView in StorybookView in PlayroomAPI Reference

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Message } from '@adaptavant/eds-core';

Status​

The status prop controls the trailing icon and its color.

This message is sending
This message has been sent
This message has been delivered
This message has been read
<Stack className="gap-2 w-full">
  <Message status="sending">This message is sending</Message>
  <Message status="sent">This message has been sent</Message>
  <Message status="delivered">This message has been delivered</Message>
  <Message status="read">This message has been read</Message>
</Stack>
View in Playroom

Custom trailing content​

Pass railEnd to replace the default status icon with custom trailing content.

This message is not needed
<Message railEnd={<DeleteIcon size="16" tone="neutralTertiary" />}>This message is not needed</Message>
View in Playroom

Failed​

When status is "failed", the message uses a critical background. Provide a retry control through railEnd.

This message failed to send
<Message status="failed">This message failed to send</Message>
View in Playroom

With header​

Group several messages under a MessageHeader. Indent the message stack to align with the sender name.

Robert
8:02 AM
This is a placeholder message
This is a placeholder message
This is a placeholder message
<Stack className="w-full">
  <MessageHeader avatar={{ name: 'Robert' }} timestamp="8:02 AM" />
  <Stack className="w-full ps-6">
    <Message status="delivered">This is a placeholder message</Message>
    <Message status="delivered">This is a placeholder message</Message>
    <Message status="delivered">This is a placeholder message</Message>
  </Stack>
</Stack>
View in Playroom

API Reference​

Message

PropDefaultDescription
children_ReactNode
The message content.
as?'div''div' | 'p' | 'span'
The element type used for the content wrapper.
status?_'sending' | 'sent' | 'delivered' | 'read' | 'failed'
The delivery status of the message. Controls the default trailing icon and background (failed uses a critical background).
railEnd?_ReactNode
Custom trailing content. When provided, replaces the default status icon.
isHovered?_boolean
Applies a controlled hover background when true.
isPinned?_boolean
Applies a pinned background.
isSelected?_boolean
Applies a selected background.

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.

Message parts​

Hello, how can I help you?
<Message
  classNames={{
    content: 'text-secondary',
    statusIcon: 'text-critical'
  }}
  status="read"
>
  Hello, how can I help you?
</Message>
View in Playroom
PartDescription
rootThe message row container.
contentThe wrapper around the message children.
statusIconThe trailing status icon or custom railEnd content.