Components / Bubble

Bubble

The message surface. Sizes to content up to 80% of the row; seven variants cover the primary, neutral, tinted, and error treatments. Composes inside ZitsMessageContent, or stands alone.

Examples

Set Variant to change the visual style. ghost drops the frame and the max-width cap, useful for assistant markdown that should span the row. Reactions overlap the bottom edge of a bubble, so leave room below.

Default

Secondary

Muted

Tinted

Outline

Ghost spans the full row and drops the frame.

Destructive

Nice work on the release.

👍 ❤️

razor

<ZitsBubble Variant="secondary">
    <ZitsBubbleContent>Nice work on the release.</ZitsBubbleContent>
    <ZitsBubbleReactions>
        <span role="img" aria-label="Reactions: thumbs up, heart">&#128077; &#10084;&#65039;</span>
    </ZitsBubbleReactions>
</ZitsBubble>

Installation

Terminal bash

navius add chat

API reference

ZitsBubble (root; in chat UIs prefer setting alignment on ZitsMessage instead):

Prop	Type	Default
Variant	string	"default"
Align	string	"start"

ZitsBubbleReactions:

Prop	Type	Default
Side	string	"bottom"
Align	string	"end"

Parts

Prop	Type	Default
ZitsBubbleGroup	container	stacks consecutive bubbles from the same sender
ZitsBubble	root	variant + align (default \| secondary \| muted \| tinted \| outline \| ghost \| destructive)
ZitsBubbleContent	slot	the framed surface; render your own button/a inside for an interactive bubble
ZitsBubbleReactions	slot	overlapping reaction row, side/align anchor the edge