Astryx Design System

Chat System Message@astryxdesign/core v0.0.15 · ChatSystemMessage

Usage

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.

ts
import {ChatSystemMessage} from '@astryxdesign/core/Chat'

Examples

Common configurations, variations, and states.

ChatSystemMessage — Status Updates

Realistic status messages in a conversation flow showing membership changes, timestamps, and resolution notices.

ChatSystemMessage — Variants

Default and divider variants side by side. Use default for inline status updates and divider for date separators or section breaks.

ChatSystemMessage — Icon

System messages with a leading icon that reinforces the message type. Use icons to help users scan and identify message categories at a glance.