MessageBubble

A chat message bubble, in (left) or out (right).

Group: Lists · Kind: macro · in the lite catalog

Preview

example

Is the printer fixed?

18:00

side · in · author + attachment

spezl

IMG_2041.jpg

There you go.

20:21

a conversation

Is the printer fixed?

18:00

Yes, driver's updated. Try again.

18:02

Send me the photo from the Wiesn I put on the desktop.

20:20

On its way…

20:21

Open in the playground

Platforms

The same specimen painted by React, SwiftUI, Compose and gpui.

Variants

status · sending

Is the printer fixed?

18:00

status · sent

Is the printer fixed?

18:00

Props

Prop	Type	Required	Bindable	Description
text	markdown	yes	yes	The message.
side	in | out	–	–	out = the viewer’s. Default "in".
time	string	–	yes	Under the text.
status	sending | sent | read	–	yes	Delivery, out only.
author	string	–	yes	Caption above, in only.

Events

None.

Slots

• attachment: one component by id

Children

none

A2UI basic mapping

No basic catalog component maps here.

Built from

Box · Icon · Markdown · Text

Accessibility

Role: group

group labelled by author, else time; the delivery icon is labelled sending/sent/read

Not focusable; no keys.

Theming

Recipe parts: MessageBubble/root MessageBubble/bubble MessageBubble/author MessageBubble/text MessageBubble/footer MessageBubble/time MessageBubble/status

Keyed by: side status :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover

Themes · Write a theme

Related

Icon · Markdown · Text · Section · Group · Trace · TraceItem · Plan