ComponentsBubble

Components

Bubble

The user message bubble: radius 12 | 10, padding 12×16 | 8×12, 15/21 text (one line = 45), at most 85 % of the column.

Variants

default = the chat bubble (black 5 % | white 5 %); personal = the blue personal tint; outline = a card ring; ghost = no fill; destructive = a failed send.

default

Could you summarise this thread?

personal

Could you summarise this thread?

outline

Could you summarise this thread?

ghost

Could you summarise this thread?

destructive

Could you summarise this thread?

Light

default

personal

outline

ghost

destructive

Dark

default

personal

outline

ghost

destructive

Text

Shrink-wraps the text up to 85 %; keeps newlines; a long unbroken word wraps.

Multi-line, newlines and a long word (736px column)

I don't need a chat app. What I need is the component styling, with a different theme but a vanilla component I can use and restyle: buttons, inputs, dialogs, settings, sidebars, dropdowns, menus and more.

First line Second line after a newline After an empty line

supercalifragilisticsupercalifragilisticsupercalifragilisticsupercalifragilisticsupercalifragilisticsupercalifragilisticsupercalifragilisticsupercalifragilisticsupercalifragilisticsupercalifragilistic

Density, motion, skeleton

Compact (radius 10, 8×12, 14/18)

Compact bubble

Enter (Code transcript): .92 → 1, 450 ms overshoot

Run the test suite

Loading skeleton (288×44)

Group, reactions, interactive

Stacked bubbles are 2px apart. BubbleReactions is a kit extra. A bubble rendered as a button gets the ghost hover fill and the focus ring.

BubbleGroup

One more thing

and the light palette too

Reactions

Shipped it!

🎉 2

Interactive (as button)