Bubble

The speech bubble for a message's text, in seven variants on the tokens. A bubble can be a button, for suggested replies.

Sourcecomponents/bubble.tsx

Primary bubble

Secondary bubble

Muted bubble

Tinted bubble

Outline bubble

Ghost: no fill, for long answers that read like a document.

Destructive bubble

Usage

Bubble usage

import { Bubble, BubbleContent, BubbleGroup } from "@/components/bubble";
export function BubbleUsage({ reply }: { reply: (text: string) => void }) {  return (    <BubbleGroup>      <Bubble variant="secondary">        <BubbleContent>Should I book the 9:30 train?</BubbleContent>      </Bubble>      {["Yes", "No"].map((answer) => (        <Bubble key={answer} variant="outline">          <BubbleContent render={<button type="button" onClick={() => reply(answer)} />}>{answer}</BubbleContent>        </Bubble>      ))}    </BubbleGroup>  );}

When to use

Use when

The text of a message. primary for the user, secondary or ghost for the assistant, destructive for a failed send; render a button for a suggested reply

Don’t use when

Callouts on a page (use Alert); content blocks (use Card)