LifeDS

Component

Bubble

Conversational message bubbles for chat interfaces. Supports seven variants, start/end alignment, grouping, reactions and collapsible content.

Bubblevariant: default · secondary · muted · tinted · outline · ghost · destructive · align: start · end
BubbleContentrender — polymorphic content (button, link)
BubbleReactionsside: top · bottom · align: start · end
BubbleGroupgroups consecutive bubbles from the same sender
Playground
This is a bubble in the default variant.

Basic — conversation

Hey there! what's up?
Hey! Want to see chat bubbles?
I can group messages, switch sides, and keep the whole thread easy to scan.
Sure. Hit me with your best demo.
Yes. You are reading a demo that is demoing itself. Very meta. Very on-brand.

Variants

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.
Ghost bubbles work for assistant text and other content that should not be framed. They are full width and can take the full width of the container.

Alignment — start · end

This bubble is aligned to the start. This is the default alignment.
This bubble is aligned to the end. Use this for user messages.

BubbleGroup — consecutive messages

Can you tell me what's the issue?
You tell me!
It worked yesterday. You broke it!
Find the bug and fix it.
👀
Want me to diff yesterday's you against today's you? It's a bit embarrassing.

Interactive content — render as button

How can I help you today?

Reactions — emoji and action buttons

I don't need tests, I know my code works.
Bold. Fine I'll add some tests. I'll let you know when they're done.
Tests passed on the first try. All 142 of them. Looking good!
Are you sure I can run this command?

Collapsible content — show more / show less

How can I help you today?
The accessibility review found two focus states that were visually too subtle in dark mode. I checked the dialog, menu, and drawer paths because each...

With Tooltip — read receipt

Did you remove the stale route?
Yes, removed it from the registry.

With Popover — error details

Run the build script.
Failed to run the command.

Tokens used

9 semantic tokens consumed by this component.

--primaryPrimary
bg-primarytext-primaryborder-primaryring-primary
--primary-foregroundPrimary Foreground
text-primary-foregroundbg-primary-foreground
--secondarySecondary
bg-secondarytext-secondaryborder-secondary
--secondary-foregroundSecondary Foreground
text-secondary-foreground
--mutedMuted
bg-mutedtext-mutedborder-muted
--muted-foregroundMuted Foreground
text-muted-foreground
--destructiveDestructive
bg-destructivetext-destructiveborder-destructivering-destructive
--backgroundBackground
bg-background
--borderBorder
border-borderborder