Bubble

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

Hello! How can I help you?

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.

🔥

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

export function BubbleVariantsExample() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8 py-2">

Align

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

Left side (start)

Right side (end)

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

export function BubbleAlignExample() {
  return (
    <div className="flex w-full flex-col gap-2">

Reactions

Use BubbleReactions to attach an emoji reaction badge.

Understood, Thank you

👍

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

export function BubbleReactionsExample() {
  return (
    <Bubble variant="tinted">
      <BubbleContent>Understood, Thank you</BubbleContent>
      <BubbleReactions>👍</BubbleReactions>
    </Bubble>
  )
}

Bubble

UsageCopy Anchor Link

ExamplesCopy Anchor Link

VariantsCopy Anchor Link

AlignCopy Anchor Link

ReactionsCopy Anchor Link

On this page

Usage

Examples

Variants

Align

Reactions