Design system

Message

Conversation layout primitives for avatars, metadata, content, and footers.

Use Message to give a conversation entry a consistent avatar, content column, header, and footer. Pair it with Bubble when the message needs a distinct readable surface.

Built on Workshop1 compositionUpstream API
AK
Alex Kim, service advisor
The vehicle is ready for collection after 4 pm.
Today at 2:14 pm
You
Perfect, I’ll be there after work.
Delivered

Composition

MessageGroup is the outer stack. Inside each Message, use MessageAvatar and MessageContent; add MessageHeader and MessageFooter only when that metadata is useful.

Accessibility

Keep the speaker name in text and treat initials as a fallback, not the only identifier. Use footer text for delivery state or time, and announce state changes only when they require attention.

Best practices

  • Group consecutive entries from the same participant when repeated metadata adds noise.
  • Use align="end" consistently for the current participant.
  • Pair Message with Bubble rather than recreating alignment and surfaces per conversation.