Skip to page content

Chat Message

Quasar supplies a chat component called QChatMessage which is really a chat entry that renders the data given by the props.

TIP

To mix messages with avatar and without avatar in the same thread, use a placeholder avatar image.

Usage

The basics

NOTE

Using the property sent is intended for the sender of the chat message. The other side is for received messages.

Basic


Name


Avatar


Stamp


Label


Customization

Size


Slots

Sanitization

CAUTION

Always sanitize values if you do not trust the origin (if the value comes from user input).

Accessibility
v2.25+

The message text is plain readable content and the avatar image is hidden from assistive technology. Sent vs. received is conveyed only visually (alignment and color), so always provide the name prop — or equivalent text content — so that authorship gets announced. The *-html props render raw HTML: sanitizing it is entirely your responsibility (see “Sanitization” above).