Chat Message Bubble Alpha Light DOM & Tailwind

Usage

Chat Message Bubble presents a single consumer-owned fragment inside a Chat Message. See the Chat family guide for complete turn and conversation composition.

import "@nordhealth/components/lib/ChatMessageBubble"

Composition

Chat Message Bubble is a presentational fragment within Chat Message. It inherits sender and density context from the surrounding turn, owns the surface variant and grouping treatment, and leaves the semantics and behavior of its consumer content unchanged.

Examples

Variants and grouping

Use variant="filled", ghost, or error to match the message state. For consecutive fragments from one sender, set group to first, middle, and last; only the sender-side corners tighten. Sender alignment and compact, balanced, or spacious density are inherited from the nearest Chat Message unless explicitly overridden.

Filled incoming messages use the standard Nord surface and strong border. Outgoing messages use the weak information surface and information border, with the flat corner mirrored using logical properties in RTL. The default message measure is 20rem; override --n-chat-message-bubble-max-inline-size when a product needs a different conversation measure.

Accessibility

The bubble is presentational and does not replace the semantics of its content. Keep links, controls, lists, and structured text as real elements inside it. Error treatment includes semantic text/color roles, but the message copy should still explain the failure without relying on color alone.