Comment Bubble
betaA canvas comment pin — an avatar in a speech-bubble corner that grows into the thread and a reply composer.
- Display
- 1 file
- No extra npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add comment-bubbleNo npm packages are needed beyond what Dowel already requires.
import { CommentBubble } from "@/components/ui/comment-bubble";Default
Gallery
<CommentBubble>
| Prop | Type | Default |
|---|---|---|
comments (required)The thread. The first comment's author is the pin's avatar. | CommentBubbleComment[] | — |
defaultOpen | boolean | false |
onOpenChange | (open: boolean) => void | — |
onReplyShows a reply composer; called with the trimmed reply. | (message: string) => void | — |
open | boolean | — |
replyLabelThe reply field's accessible name and placeholder. | string | "Reply" |
widthThe expanded bubble's width. Numbers are pixels. | number | string | "11.25rem" |
Plus every attribute of <div> except children.
The avatar is a disclosure button ("Comment by <name>, N replies") with aria-expanded and aria-controls. The thread is a labelled group and an ordered list; while collapsed it is invisible and inert. Opening moves focus to the reply field when there is one; Escape collapses the thread and returns focus to the avatar; a press outside collapses it. The reply field and send button are named. The grow and blur stop under reduced motion.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes