104Get started
HextaUI

Bubble: Variants

Seven treatments, from a strong primary bubble to unframed ghost content for assistant replies. destructive tints the surface and colors icons inside it.

Pushed the fix, can you take a look?
Looks good. Merging after CI passes.
Jamie joined the conversation
Pinned: release notes are in the doc.
Here is the summary you asked for.
Ghost bubbles drop the frame so assistant replies can span the full row and read like a document.
Message failed to send. Tap to retry.
import { IconAlertCircle } from "@tabler/icons-react"

import { Bubble, BubbleContent } from "@/components/ui/bubble"

export function BubbleVariants() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Bubble>
        <BubbleContent>Pushed the fix, can you take a look?</BubbleContent>
      </Bubble>
      <Bubble variant="secondary">
        <BubbleContent>Looks good. Merging after CI passes.</BubbleContent>
      </Bubble>
      <Bubble variant="muted">
        <BubbleContent>Jamie joined the conversation</BubbleContent>
      </Bubble>
      <Bubble variant="tinted">
        <BubbleContent>Pinned: release notes are in the doc.</BubbleContent>
      </Bubble>
      <Bubble variant="outline">
        <BubbleContent>Here is the summary you asked for.</BubbleContent>
      </Bubble>
      <Bubble variant="ghost">
        <BubbleContent>
          Ghost bubbles drop the frame so assistant replies can span the full
          row and read like a document.
        </BubbleContent>
      </Bubble>
      <Bubble variant="destructive">
        <BubbleContent>
          <IconAlertCircle /> Message failed to send. Tap to retry.
        </BubbleContent>
      </Bubble>
    </div>
  )
}

Add this example

This adds the example as components/examples/bubble/variants.tsx, together with the Bubble component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/bubble-variants.json

To add only the component, follow the Bubble installation.

Props in this example

The Bubble props this example sets, from the API reference.

Bubble

PropTypeDefault
variant
"default" | "secondary" | "muted" | "tinted" | "outline" | "ghost" | "destructive""default"

Every prop is in the Bubble API reference.

More Bubble examples

See them all, with keyboard support and accessibility notes, on the Bubble page.

Related components