Bubble

Overview

The speech bubble: outgoing on primary (default), incoming on the tonal secondary-container or neutral surface-container, plus outlined, ghost, relative-color tinted and error-toned destructive forms. The message text rides the kit's type-body scale.

Bubbles carry a tail — the bottom corner on the side the bubble is aligned to stays square, so the surface points back at its sender. Pass tail={false} for uniform 16px corners. ghost is the assistant voice: no container and no padding, just body text on on-surface, so a generated reply reads as page copy rather than as a quoted message.

A bubble fills the width it is given — the conversation gutter belongs to the row, so Message supplies it. Give the bubble its own max-width when using it outside a Message.

Pass a button or link to BubbleContent render={...} for pressable bubbles — they get a hover shift, the kit focus ring, and a subtle scale-down on press. Bubbles arrive by lifting a soft blur into place (motion folds away under prefers-reduced-motion).

Examples

Variants

Reactions

Installation

npx shadcn@latest add bubble

API Reference

Accessibility

• Pressable bubbles are real buttons/links (asChild) with the kit's secondary focus ring.
• Bubble color is styling, not semantics — sender identity must be readable from the message header/avatar.