Message

Usage

Overview

Message renders conversational content—chat transcripts, QA review notes, dispatch threads—with optional toolbars (copy, jump to source) and layout tuned for dense feeds. It is not a system alert surface; it prioritizes readability and light, inline actions rather than system-level notifications. Reach for Banner or Snackbar when the content is alert-shaped rather than conversational.

Dana OrtizSupervisor2026-02-14T14:05:00.000Z

Priority response to Mercy General Hospital, 300 Pine Street. Stand by for dispatch confirmation.

When to use

Chatroom and collaboration UIs where messages appear in chronological feeds.
Review workflows that attach actions to a specific utterance or logged event.
Translation or metadata affordances that belong adjacent to the bubble.

When not to use

Global system status—use Snackbar or Banner.
Form validation summaries—use field errors and a page-level Banner.
Email-style long-form composition—use a rich-text editor.

Content guidelines

Templated content passes through formatMessage; never embed unsanitized HTML.
Toolbar actions use minimal verb-first labels; bulk or rare actions move into an overflow menu.

Behavior and states

Toolbar visibility. Hover-reveal is fine on desktop; toolbarFullyControlledVisibility helps on touch where hover is unreliable. Choose explicit visibility when operators rely on copy actions frequently.
Send / failure state. Show the state directly on the message (pending, failed with retry). Hiding it in logs alone is insufficient.

Best practices

Keep toolbar actions minimal—copy, jump to source, react. Defer bulk moderation to headers or menus.
Maintain tap targets for actions on touch deployments.

Don't

Overload bubbles with every action an operator might take.
Use message styling for log-style system events that aren't conversational.

Accessibility

Toolbar buttons are reachable by keyboard even when visibility is hover-driven on desktop. Screen readers announce author, timestamp, and content in a meaningful order. See Accessibility for the full contract.

Banner for alerts.
Snackbar for transient feedback.
Icon button for compact actions in the toolbar.

Accessibility / Screen Reader Testing

Message / API and Development

On this page

Message

Usage

Overview

Dana OrtizSupervisor2026-02-14T14:05:00.000Z

Priority response to Mercy General Hospital, 300 Pine Street. Stand by for dispatch confirmation.

When to use

Chatroom and collaboration UIs where messages appear in chronological feeds.
Review workflows that attach actions to a specific utterance or logged event.
Translation or metadata affordances that belong adjacent to the bubble.

When not to use

Global system status—use Snackbar or Banner.
Form validation summaries—use field errors and a page-level Banner.
Email-style long-form composition—use a rich-text editor.

Content guidelines

Templated content passes through formatMessage; never embed unsanitized HTML.
Toolbar actions use minimal verb-first labels; bulk or rare actions move into an overflow menu.

Behavior and states

Toolbar visibility. Hover-reveal is fine on desktop; toolbarFullyControlledVisibility helps on touch where hover is unreliable. Choose explicit visibility when operators rely on copy actions frequently.
Send / failure state. Show the state directly on the message (pending, failed with retry). Hiding it in logs alone is insufficient.

Best practices

Keep toolbar actions minimal—copy, jump to source, react. Defer bulk moderation to headers or menus.
Maintain tap targets for actions on touch deployments.

Don't

Overload bubbles with every action an operator might take.
Use message styling for log-style system events that aren't conversational.

Accessibility

Banner for alerts.
Snackbar for transient feedback.
Icon button for compact actions in the toolbar.

Accessibility / Screen Reader Testing

Message / API and Development

On this page