Vanilla Breeze

data-bubble

Chat bubble shapes for messaging UIs — incoming, outgoing, assistant, thought, typing, error, system variants with CSS shape() tails.

Overview

The data-bubble attribute provides a full taxonomy of chat bubble shapes for messaging UIs. Each variant has a distinctive tail direction, background color, and alignment built from CSS shape() paths.

Bubbles are designed to be used inside a flex column container. Each variant sets its own align-self for correct left/right/center positioning.

Variants

Value Tail Background Alignment
incoming Bottom-left --color-surface-raised Left
outgoing Bottom-right --color-primary Right
assistant Top-left Tinted secondary Left
thought Cloud shape (no tail) --color-surface-raised Left
typing Bottom-left (like incoming) --color-surface-raised Left
error Left accent border (no clip) Danger tint Left
system Pill (no clip) --color-surface-sunken Center

Usage

Basic chat conversation

Typing indicator

The typing bubble expects three empty <span> children for the animated dot indicators. The animation respects prefers-reduced-motion.

Accessibility

  • Use semantic elements (<p>, <blockquote>) for bubble content
  • The typing indicator uses opacity animation, not content changes, to avoid screen reader noise
  • System messages use text-align: center and a pill shape for visual distinction
  • Error bubbles use a colored left border rather than color alone to indicate errors
  • All data-morph and typing animations are disabled when prefers-reduced-motion: reduce is active

Demos
↑