Skip to content
AI chat

Bubble

The petal-shaped surface of one chat turn.

import { Bubble } from "@flinbu/seed";

Variants and reactions

Can you rename brand-500?
To accent-500, everywhere.
Outline, for quoted content.
Muted, for a system note.
Accent, for the one note that must stand out.
That file couldn't be read. Try a JSON export.
import { Bubble, BubbleGroup } from "@flinbu/seed";
import { ThumbsUp } from "lucide-react";

const [liked, setLiked] = React.useState(false);

<div className="flex w-full max-w-xl flex-col gap-base">
  <BubbleGroup align="end">
    <Bubble align="end">Can you rename brand-500?</Bubble>
    <Bubble align="end">To accent-500, everywhere.</Bubble>
  </BubbleGroup>
  <Bubble variant="outline">Outline, for quoted content.</Bubble>
  <Bubble variant="muted">Muted, for a system note.</Bubble>
  <Bubble variant="accent" reactions={[{ icon: <ThumbsUp />, label: "Helpful", count: liked ? 3 : 2, pressed: liked, onPressedChange: setLiked }]}>Accent, for the one note that must stand out.</Bubble>
  <Bubble variant="error">That file couldn't be read. Try a JSON export.</Bubble>
</div>

Use it for

  • Your turns (neutral).
  • One note that must stand out (accent).

Use something else for

  • A blue bubble for 'me': color is spent on Pluto.

Props

PropTypeDefaultDescription
variant'neutral''ghost''outline''muted''accent''error''neutral'Surface.
align'start''end''start'Where the tight corner points.
size'md''sm''md'Padding.
hrefstring–Makes it a link.
reactions{ icon?, label, count?, pressed?, onPressedChange? }[]–Small toggles under it.

Accessibility

  • Reactions are Toggles named with their count.