Bubble

A single chat message bubble. Self-aligning, so a plain column of them already reads as a conversation with nothing else required.

Source Storybook Accessibility

Hey — did the deploy finish?

Just went green a minute ago.

Perfect, thanks.

Usage#

import { Bubble } from "neelam-ui";
 
<div className="flex flex-col gap-2">
  <Bubble>Hey — did the deploy finish?</Bubble>
  <Bubble variant="outgoing">Just went green a minute ago.</Bubble>
</div>

Variants#

variant is "incoming" (the default) or "outgoing". An outgoing bubble pushes itself to the right with margin-left: auto and takes the inverted colour, so you do not need a wrapper or an alignment prop on the container — stacking bubbles in a flex flex-col is the whole setup.

Each bubble is w-fit and capped at 75% width, and the tail corner flips sides with the variant.

Bubble or Message?#

Bubble is the lowest-ceremony way to get a working chat log. Reach for Message once you also need an avatar, a sender name, or a timestamp alongside the bubble — it owns the row layout and takes bubbles as children.

Keyboard#

Keyboard shortcuts
Key	Behaviour
`Tab`	Not focusable. A bubble is static content — anything interactive inside it keeps its own tab stop.

Accessibility#

A plain <div> with no ARIA role. A chat bubble is ordinary text content, and inventing a role for it would tell assistive tech something untrue.
Colour is not the only signal for who sent a message: alignment and the tail corner carry it too. Even so, colour and position alone do not name the sender — use Message's sender, or visible text, when that matters.
break-words is set, so a long unbroken URL wraps rather than forcing the conversation to scroll sideways.

Announce new messages yourself

Appending a bubble to a list is silent for a screen reader user. A live region around the conversation — or moving focus deliberately — is what makes an arriving message noticeable. Bubble does not assume either, because the right choice depends on how chatty the feed is.

API reference#

Props for Bubble
Prop	Type	Default
`variant` Whose message this is — which side it aligns to and which color it takes. Defaults to `"incoming"`.	`enum`	`incoming`

Also accepts every native <div> attribute.