Skip to content
🚀 Material UI and MUI X v9 are out! Check out the announcement blogpost.
+

Chat - Indicators in context

Compose typing, unread, and scroll-to-bottom indicators inside a realistic thread layout.

Indicators are structural affordances rather than floating utilities, so their placement inside the thread layout is part of their behavior. The demo below shows where each indicator belongs in a realistic thread:

Indicator thread
Typing, unread boundaries, and scroll state
Alice Chen
Alice Chen
Confirmed the unread marker still lands at the right boundary. Item 23.
You
You
Added one more note so the scroll affordance becomes visible while scrolled away. Item 24.
Sent
MUI Guide
MUI Guide
Reviewed the latest support transcript and normalized the key states. Item 25.
You
You
Queued the oldest messages for prepend pagination. Item 26.
Sent
Alice Chen
Alice Chen
Confirmed the unread marker still lands at the right boundary. Item 27.
You
You
Added one more note so the scroll affordance becomes visible while scrolled away. Item 28.
Sent
MUI Guide
MUI Guide
Reviewed the latest support transcript and normalized the key states. Item 29.
You
You
Queued the oldest messages for prepend pagination. Item 30.
Sent
Alice Chen
Alice Chen
Confirmed the unread marker still lands at the right boundary. Item 31.
You
You
Added one more note so the scroll affordance becomes visible while scrolled away. Item 32.
Sent
MUI Guide
MUI Guide
Reviewed the latest support transcript and normalized the key states. Item 33.
New messages
You
You
Queued the oldest messages for prepend pagination. Item 34.
Sent
Alice Chen
Alice Chen
Confirmed the unread marker still lands at the right boundary. Item 35.
You
You
Added one more note so the scroll affordance becomes visible while scrolled away. Item 36.
Sent

Placement reference

  • Indicators.TypingIndicator near the thread header or composer
  • Indicators.UnreadMarker inside the message row pipeline
  • Indicators.ScrollToBottomAffordance inside a message-list-aware container
  • MessageList.Root as the source of unseen-message and scroll state

Implementation notes

  • Tie indicators to a real thread so placement rules stay obvious.
  • Show unread and typing state at the same time so the reader can see that the indicators solve different problems.
  • Keep the surrounding layout realistic so the scroll affordance has a reason to appear.

When to use this pattern

Use this pattern when:

  • The thread needs a visible unread boundary.
  • Typing activity should be surfaced inline.
  • The scroll position is no longer pinned to the latest message.

This pattern is common in shared support queues, collaborative assistant surfaces, and any thread where users routinely scroll away from the newest message.

Placement rules

  • TypingIndicator belongs near thread-level context such as the header or composer area.
  • UnreadMarker belongs in the row pipeline because it marks a message boundary, not a global thread status.
  • ScrollToBottomAffordance depends on message-list state, so it is easiest to reason about when it stays inside a message-list-aware container.

See also

API