Message

Quick Preview

Composition

Message is the bubble shell. It owns direction, size, the tail corner, and the meta row (timestamp + read receipt), and exposes size/direction to its parts through data-* attributes — so the content and attachment slots size and colour themselves with no props of their own.

MessageGroup
├── Marker (optional — date divider, system notice, unread line)
└── Message (direction, size, timestamp, status, footer)
    ├── MessageContent            (prose)
    ├── MessageMedia              (image / video)
    │   ├── MessageMediaImage | MessageMediaPlaceholder
    │   ├── MessageMediaPlay
    │   └── MessageMediaDuration
    ├── MessageFile               (document)
    │   ├── MessageFileIcon
    │   ├── MessageFileInfo › MessageFileName · MessageFileDetail
    │   └── MessageFileAction
    └── MessageVoice              (voice note)
        ├── MessageVoicePlay
        ├── MessageVoiceWaveform
        └── MessageVoiceDuration

Pick exactly one content slot per bubble — MessageContent, MessageMedia, MessageFile, or MessageVoice. The shell renders the meta row itself.

Usage

<MessageGroup>
  <Message direction="received" timestamp="14:30">
    <MessageContent render={<p />}>Is it still available?</MessageContent>
  </Message>

  <Message direction="sent" status="read" timestamp="14:32" footer="Sent by AI">
    <MessageContent render={<p />}>Yes — see you there.</MessageContent>
  </Message>
</MessageGroup>

Examples

Conversation thread

Set direction per side and pass a timestamp. Sent messages show the Figma read-receipt tick by default; set showReadReceipt={false} to hide it. Use status="delivered" to change its accessible label or status="failed" to render legible failure text instead of an icon. The optional footer sits below a sent bubble for quiet attribution.

Attachments

Swap MessageContent for MessageMedia, MessageFile, or MessageVoice. Each reads the bubble's size and direction from the shell, so a picture, a document, and a voice note line up on the same ladder without extra props.

Markers

Use Marker as a sibling of messages — not a child — for date dividers (variant="pill"), system notices, and unread lines. Give it real semantics with render (e.g. render={<h3 />}) since the same component serves several meanings.

Props

Accessibility

• Preserve the documented composition so the bubble's size/direction context reaches its content and attachment slots.
• MessageMediaImage requires alt; treat chat images as content, not decoration.
• The read receipt does not rely on colour alone — read and delivered expose an accessible label, and failed renders text.
• Give Marker real semantics with render where they exist (a heading for a date, role="separator" for an unread line).
• Provide accessible names for the media, file, and voice controls; the play/download controls are real buttons with sensible defaults.