Bubble
Bubbles wrap a single piece of conversational content. They provide the visual container for chat messages and pair with Message to build conversation interfaces.
Preview
Usage
tsx
import { Bubble, BubbleContent } from "@e-infra/design-system"
<Bubble variant="muted">
<BubbleContent>How can I help you today?</BubbleContent>
</Bubble>Variants
Preview
| Variant | Background | Text |
|---|---|---|
| default | primary | primary-foreground |
| secondary | secondary | secondary-foreground |
| muted | surface-raised | inherited |
| tinted | derived from primary | text |
| outline | background + border | inherited |
| ghost | transparent | inherited |
| error | error/10 | error |
Reactions
BubbleReactions is absolutely positioned against its parent Bubble, so leave vertical room for the overhang.
Preview
tsx
<Bubble variant="muted" className="mb-4">
<BubbleContent>Deployment finished in 42 seconds.</BubbleContent>
<BubbleReactions>🎉 2</BubbleReactions>
</Bubble>Interactive bubbles
Use asChild on BubbleContent to render a button or link. Hover and focus styles are applied automatically.
Preview
tsx
<Bubble variant="outline">
<BubbleContent asChild>
<button type="button">Open the deployment log</button>
</BubbleContent>
</Bubble>Grouping
BubbleGroup stacks consecutive bubbles from the same sender with tighter spacing.
Preview
Components
| Component | Description |
|---|---|
Bubble | Container that applies the variant and alignment |
BubbleContent | The content surface — carries the variant styling |
BubbleReactions | Overlay pill for reactions on a bubble |
BubbleGroup | Stacks consecutive bubbles from the same sender |
Props
Bubble
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | secondary | muted | tinted | outline | ghost | error | default | Visual style variant |
| align | start | end | start | Self-alignment within a column |
| className | string | - | Additional CSS classes |
| ...props | React.HTMLAttributes | - | Native div props |
BubbleContent
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | Render as child component |
| className | string | - | Additional CSS classes |
| ...props | React.HTMLAttributes | - | Native div props |
BubbleReactions
| Prop | Type | Default | Description |
|---|---|---|---|
| side | top | bottom | bottom | Edge the overlay attaches to |
| align | start | end | end | Horizontal position on that edge |
| className | string | - | Additional CSS classes |
| ...props | React.HTMLAttributes | - | Native div props |
BubbleGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| ...props | React.HTMLAttributes | - | Native div props |