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

<!-- Chat container: flex column with gap --> <section class="chat-window"> <p data-bubble="system">Today, 2:34 PM</p> <p data-bubble="incoming">Hey, have you seen this?</p> <p data-bubble="outgoing">Yes! Looks great.</p> <p data-bubble="assistant">I can help with that.</p> <p data-bubble="thought">Hmm, interesting idea...</p> <!-- Typing indicator with animated dots --> <p data-bubble="typing"> <span></span> <span></span> <span></span> </p> <p data-bubble="error">Failed to send. Check connection.</p> <p data-bubble="system">Alice left the conversation</p> </section> <style> .chat-window { display: flex; flex-direction: column; gap: var(--size-s); max-width: 500px; padding: var(--size-l); } </style>

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