Bubble

When to UseCopy Anchor Link

• for the text of each entry in a conversation, inside a Message
• as a button for a suggested action, such as “Send a payment reminder”
• as a destructive Bubble, to tell users that a message failed
• to show the reactions to a message on its edge, with BubbleReactions

When Not to UseCopy Anchor Link

• for the sender’s avatar, name, or time (wrap the Bubble in a Message)
• for a file (use an Attachment)
• for a date, an event, or a status in the conversation (use a Marker)

AnatomyCopy Anchor Link

Bubble sets the variant and the alignment and has no surface of its own. BubbleContent is the surface, and BubbleGroup stacks Bubbles.

VariantsCopy Anchor Link

By default, a Bubble has the default variant, which is the fill of the current user’s messages. Use secondary for everyone else’s messages.

BehaviorCopy Anchor Link

A Bubble is as wide as its text, up to 80% of its container. Longer text wraps, and a word that is longer than the Bubble breaks. A ghost Bubble can fill the full width.

AlignmentCopy Anchor Link

To move a Bubble to the end of a flex column, for example a BubbleGroup, set align="end". In a plain block, align has no effect. Inside a Message, the Message’s own align moves the Bubble, the avatar, and the footer together, so avoid setting align on the Bubble there.

ReactionsCopy Anchor Link

BubbleReactions is positioned on the Bubble’s bottom edge, at its end. To move it to the top edge, set side="top". To move it to the start, set align="start".

Buttons and LinksCopy Anchor Link

To render a button or an a in place of the div, pass the element to render on BubbleContent. A trigger works in the same way: pass a PopoverTrigger to render on BubbleContent.

ContentCopy Anchor Link

AccessibilityCopy Anchor Link

A Bubble is a div with no role, and it isn’t focusable. When its content is rendered as a button or an a, the content has the role and the keys of that element.

Set role="img" and an aria-label that names the reactions on BubbleReactions. Screen readers then read one phrase instead of reading each emoji on its own. If users can click a reaction, render a button for each one and name it.

InstallationCopy Anchor Link

npx shadcn@latest add @summit/bubble

UsageCopy Anchor Link

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

<Bubble variant="secondary">
    <BubbleContent>The homepage draft is ready for your review.</BubbleContent>
</Bubble>;

A GroupCopy Anchor Link

To stack Bubbles from one sender, use BubbleGroup. Set align on each Bubble, not on the group.

import { BubbleGroup } from '@/components/ui/bubble';

<BubbleGroup>
    <Bubble variant="secondary">
        <BubbleContent>The homepage draft looks great.</BubbleContent>
    </Bubble>
    <Bubble variant="secondary">
        <BubbleContent>Can we move the booking button into the header?</BubbleContent>
    </Bubble>
</BubbleGroup>;

As a ButtonCopy Anchor Link

Pass a button with type="button" to render.

<Bubble variant="muted">
    <BubbleContent render={<button type="button" />}>Send a payment reminder</BubbleContent>
</Bubble>

With ReactionsCopy Anchor Link

To choose the edge and the end of that edge, set side and align on BubbleReactions.

import { BubbleReactions } from '@/components/ui/bubble';

<Bubble variant="secondary" className="mb-6">
    <BubbleContent>The contract is signed. We can start on Monday.</BubbleContent>
    <BubbleReactions role="img" aria-label="Reactions: thumbs up and party popper">
        <span>👍</span>
        <span>🎉</span>
    </BubbleReactions>
</Bubble>;

With a PopoverCopy Anchor Link

To explain a message, for example one that failed, pass PopoverTrigger to render. Use the Popover for the reason and for what users can do next.

import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';

<Popover>
    <Bubble variant="destructive">
        <BubbleContent render={<PopoverTrigger />}>This message was not delivered.</BubbleContent>
    </Bubble>
    <PopoverContent align="start" className="text-sm">
        The email address of the client bounced. Check it and send the message again.
    </PopoverContent>
</Popover>;

A Long MessageCopy Anchor Link

To shorten a long message, place the rest of it in a second Bubble inside a Collapsible. Users can click a link Button under it to show the rest.

import { Button } from '@/components/ui/button';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';

<Collapsible className="flex flex-col gap-2">
    <Bubble variant="secondary">
        <BubbleContent>The first round of feedback covers the homepage and the booking flow.</BubbleContent>
    </Bubble>
    <CollapsibleContent>
        <Bubble variant="secondary">
            <BubbleContent>On the homepage, the hero photo crops badly on phones.</BubbleContent>
        </Bubble>
    </CollapsibleContent>
    <CollapsibleTrigger render={<Button variant="link" size="sm" className="self-start px-0" />}>
        Show the full message
    </CollapsibleTrigger>
</Collapsible>;

API ReferenceCopy Anchor Link

Other props are passed to the element of each part.

BubbleCopy Anchor Link

BubbleContentCopy Anchor Link

BubbleContent adds no props of its own. See the Base UI useRender documentation for render.

BubbleReactionsCopy Anchor Link