Skip to content
🚀 Influence MUI's 2026 roadmap! Take our latest Developer Survey
+

Chat - Indicators in context

Place typing, unread, and scroll indicators into a real thread layout instead of documenting them in isolation.

This demo shows that indicators are structural affordances, not floating utilities. Their value is clearest when they are rendered exactly where the thread layout expects them.

That is why this page keeps them inside a realistic thread rather than presenting them as isolated widgets.

  • Indicators.TypingIndicator
  • Indicators.UnreadMarker
  • Indicators.ScrollToBottomAffordance
  • thread header placement
  • message-list row placement
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

Key primitives

  • 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

  • Keep the example tied to a real thread so the placement rules are obvious.
  • Show unread and typing state at the same time so the reader can see that the indicators solve different problems.
  • Keep the layout realistic enough to justify the scroll affordance rather than presenting it as an isolated button.

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 always 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.

What to pay attention to

  • 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

  • Continue with Indicators for the reference page.

API