Bubble
Chat-style message bubble for conversational UI.
Bubble renders a message surface for chat and conversation layouts. Pair with BubbleContent, optional BubbleReactions, and BubbleGroup for stacked messages.
Want to catch up later?
On my way.
See you there.
Sounds good.
Contract
Section titled “Contract”Overview
Machine-readable contract from Component Spec.
component: bubbleexport: Bubbleversion: 1attributes: data-refineui=bubble
Anatomy
| Part | data-refineui |
|---|---|
| root | bubble |
| content | bubble-content |
| group | bubble-group |
| reactions | bubble-reactions |
| surface | bubble-surface |
Variants
| Axis | Values |
|---|---|
| variant | default, secondary, muted, tinted, outline, ghost, destructive |
Layout
| Property | Value |
|---|---|
| direction | logical |
| rtl | true |
Installation
Section titled “Installation”npm install @refineui/react @refineui/tokensyarn add @refineui/react @refineui/tokenspnpm add @refineui/react @refineui/tokensbun add @refineui/react @refineui/tokensimport { Bubble, BubbleContent, BubbleGroup } from "@refineui/react";
<Bubble variant="muted" align="start"> <BubbleContent>Want to catch up later?</BubbleContent></Bubble>
<Bubble variant="default" align="end"> <BubbleContent>Sounds good.</BubbleContent></Bubble>API Reference
Section titled “API Reference”Bubble
Section titled “Bubble”| Prop | Default | Type | Description |
|---|---|---|---|
| variant | — | "default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive" | Visual style. |
| align | — | "start" | "end" | Message alignment. |
BubbleContent / BubbleReactions / BubbleGroup
Section titled “BubbleContent / BubbleReactions / BubbleGroup”Composition slots for body text, reactions, and stacked groups. See the preview for structure.