Centered system message for non-sender content like date separators, membership changes, and status notices. It is not a chat bubble; it has no avatar, no alignment, and no sender context. Use the divider variant for temporal breaks and default for inline status updates.
System messages for date dividers, status updates, and informational notices. Shows both default and divider variants in a realistic conversation flow.
Preview loads on approachPreview loads on approach
Exact source · chat-system-message-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {ChatMessageList, ChatSystemMessage} from '@astryxdesign/core/Chat';
export default function ChatSystemMessageShowcase() {
return (
<ChatMessageList>
<ChatSystemMessage variant="divider">March 15, 2026</ChatSystemMessage>
<ChatSystemMessage>Alex joined the conversation</ChatSystemMessage>
<ChatSystemMessage>Agent is thinking…</ChatSystemMessage>
<ChatSystemMessage variant="divider">Today</ChatSystemMessage>
<ChatSystemMessage>Conversation marked as resolved</ChatSystemMessage>
</ChatMessageList>
);
}
Usage
Use ChatSystemMessage for concise, non-sender content inside a chat transcript. Choose the default variant for factual status notices and the divider variant for date or section breaks. Long default content wraps within the available width. The component exposes status semantics and the divider branch includes a labelled separator.
Keep the visible message concise and self-contained so it remains understandable without an icon.
Use the divider variant for temporal or section boundaries and the default variant for factual status notices.
Use caller-provided icon artwork as the only source of meaning; the visible message must carry the same information.
Typed props
Prop
Type and behavior
children
ReactNode · required
System message content: factual text or React content such as a date, join/leave notice, or status change. Long default content wraps within the available width.
variant
'default' | 'divider' · default 'default'
Visual variant. 'default' renders centered text. 'divider' adds horizontal lines on each side via Divider: use for date separators and section breaks.
icon
ReactNode
Optional caller-provided icon content. Rendered before the message in the default variant; the divider variant currently does not render it. Wrap in Icon for consistent sizing.
