Skip to content
oks-ui

Message component

Message provides chat-thread primitives: a screen-reader-live MessageList and left/right-aligned Message bubbles carrying author, avatar, timestamp, delivery status, and automatic continuation grouping.

Layout & Display13 propsAccessibility notes

Playground

Change a prop on the right and the preview updates. Switch to Code to copy what you see.

Recipes

Copy-paste patterns for the ways Message actually gets used — each one a real, self-contained example.

Chat thread

MessageList is a live log; each Message is a bubble aligned start (received) or end (sent), with an author, avatar, and timestamp.

<MessageList>
  <Message author="Jane" avatar={<Avatar name="Jane" size="sm" />} timestamp="09:41">
    Are we still on for 2pm?
  </Message>
  <Message align="end" status="read" timestamp="09:42">
    Yes — see you then.
  </Message>
</MessageList>

Delivery status

status shows a sent/delivered/read/failed indicator on your own messages — exposed as text to assistive tech, not just an icon.

<MessageList>
  <Message align="end" status="sent" timestamp="09:44">Sent</Message>
  <Message align="end" status="delivered" timestamp="09:44">Delivered</Message>
  <Message align="end" status="read" timestamp="09:45">Read</Message>
  <Message align="end" status="failed" timestamp="09:46">Failed to send</Message>
</MessageList>

Grouped continuation

isContinuation tucks a follow-up bubble from the same author tighter under the previous one, dropping the repeated avatar while keeping its own timestamp.

<MessageList>
  <Message author="Sam" avatar={<Avatar name="Sam" size="sm" />} timestamp="10:01">
    Pushed the fix.
  </Message>
  <Message author="Sam" isContinuation timestamp="10:01">
    Can you review when you get a sec?
  </Message>
</MessageList>

Example

message.tsx
<MessageList>
  <Message author="Ada" side="start" timestamp="09:41">
    Are we still on for 2pm?
  </Message>
  <Message author="You" side="end" timestamp="09:42" status="read">
    Yes — see you then.
  </Message>
</MessageList>

Props

The full public API for Message. Every prop is stable and intentionally typed.

Data

author

ReactNode

default: —

Sender name. Hidden when isContinuation.

avatar

ReactNode

default: —

e.g. <Avatar />. Hidden when isContinuation.

timestamp

ReactNode

default: —

Shown by the author, or under the bubble on a continuation.

header / footer

ReactNode

default: —

Reply-to quote / reactions / attachments.

header

ReactNode

default: —

Pinned above the messages (a "load earlier" button, a date divider).

Layout & positioning

align

"start" | "end"

default: start

"end" right-aligns — use for the current user.

Appearance

variant

"bubble" | "plain"

default: bubble

Speech bubble or flat row (system notices).

color

"default" | "primary" | "neutral" | "success" | "warning" | "danger"

default: default

Bubble tint. An align=end bubble is primary-tinted automatically.

Behavior & states

isContinuation

boolean

default: false

Same author as the previous message — drops the avatar/author line, tightens spacing.

status

"sending" | "sent" | "delivered" | "read" | "failed"

default: —

Delivery indicator under an align=end message.

Styling

classNames

{ base?, avatar?, meta?, author?, timestamp?, body?, footer?, status? }

default: —

Slot classes.

classNames

{ base?, inner? }

default: —

Slot classes.

Accessibility

isLive

boolean

default: true

role="log" + aria-live="polite" so appended messages are announced. Set false for a static transcript.

Accessibility

  • MessageList is an `aria-live="polite"` log so new messages are announced without moving focus.
  • Delivery status is exposed as text to assistive tech, not just an icon.
  • Grouped continuation bubbles still each carry their own timestamp for context.

More in Layout & Display