Bubble

A chat message bubble for displaying conversational content with support for alignment and multiple visual styles.

Hello! How can I help you?

"use client"
import { Bubble, BubbleContent } from "uilab-core"

export function BubblePreview() {
  return (
    <Bubble variant="default">
      <BubbleContent>Hello! How can I help you?</BubbleContent>
    </Bubble>
  )
}

Usage

import { Bubble, BubbleContent } from "uilab-core"

<Bubble variant="default">
  <BubbleContent>Hello!</BubbleContent>
</Bubble>

Examples

Variants

Use the variant prop to change the visual style.

This is the default primary bubble.

This is the secondary variant.

This one is muted. It uses a lower emphasis color for the chat bubble.

👍

This one is tinted. The tint is a softer color derived from the primary color.

We can also use an outlined variant.

Or a destructive variant with a reaction.

🔥

"use client"
import { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from "uilab-core"

export function BubbleVariantsExample() {
  return (

Align

Use align="start" or align="end" to position the bubble.

Left side (start)

Right side (end)

"use client"
import { Bubble, BubbleContent } from "uilab-core"

export function BubbleAlignExample() {
  return (

Reactions

Use BubbleReactions to attach an emoji reaction badge.

Understood, Thank you

👍

"use client"
import { Bubble, BubbleContent, BubbleReactions } from "uilab-core"

export function BubbleReactionsExample() {
  return (