Message
One turn of a conversation, as a bubble that points at its author.
On this page
A message is one turn of a conversation. A received message is a raised sheet at the start of the row; a sent one is ink at the end, the way a primary button is ink. A bubble has a surface's corners, except the one that points at its author, which is tight. A discussion in which any comment can be answered is a thread.
Message
<ol class="max-w(440) mx-auto m(0) p(0)"> <li class="message"> <span class="avatar avatar-sm message-avatar"> <img class="avatar-image" src="/demo/portrait-1.svg" alt="Ada"> </span> <div class="message-bubble">Did the build for the docs site finish?</div> </li> <li class="message message-sent"> <div class="message-bubble">Yes, a minute ago. 71 pages, no warnings.</div> </li> <li class="message message-sent"> <div class="message-bubble">I also moved the previews to static pages, so the next build takes about forty seconds on a cold cache.</div> <span class="message-meta">Delivered · 14:02</span> </li> <li class="message"> <span class="avatar avatar-sm message-avatar"> <img class="avatar-image" src="/demo/portrait-1.svg" alt="Ada"> </span> <div class="message-bubble">Perfect. Ship it.</div> <span class="message-meta">Ada · 14:03</span> </li></ol>The thread is any list. Use an <ol>, since the order is the content, and clear its margin and padding with m(0) p(0); the turns bring their own rhythm. A turn stands 12px from the one before it and 4px when both come from the same side, so a change of author reads as a break. A bubble takes most of a narrow thread and never more than a comfortable measure of a wide one.
#Without avatars
In a conversation between two people the side already says who is speaking. Leave the avatar out and the bubble starts the row.
Without avatars
<ol class="max-w(360) mx-auto m(0) p(0)"> <li class="message"> <div class="message-bubble">Are we still on for Thursday?</div> </li> <li class="message"> <div class="message-bubble">I can do any time after two.</div> <span class="message-meta">09:41</span> </li> <li class="message message-sent"> <div class="message-bubble">Thursday at three.</div> <span class="message-meta">Read · 09:44</span> </li></ol>#Typing
message-typing is three dots that rise in turn, inside a bubble. The dots mean nothing to assistive technology, so the bubble carries the words: role="status" and a label such as "Ada is typing".
Typing
<ol class="max-w(360) mx-auto m(0) p(0)"> <li class="message message-sent"> <div class="message-bubble">Can you send the notes from the review?</div> </li> <li class="message"> <span class="avatar avatar-sm message-avatar"> <img class="avatar-image" src="/demo/portrait-1.svg" alt="Ada"> </span> <div class="message-bubble" role="status" aria-label="Ada is typing"> <span class="message-typing"></span> </div> </li></ol>#Accessibility
- Use an
<ol>for the thread. Put new turns in anaria-live="polite"region, or make the list one withrole="log", so arriving messages are announced without stealing focus. - Color and side are not the only signals of authorship for a screen reader: name the author in each turn, visibly in
message-metaor in a visually hidden prefix. - The avatar's
altis the author's name when no name is written in the turn; when one is, leave it empty. - With reduced motion the typing dots rest. A sent bubble is ink on moonstone and pearl on obsidian, at full text contrast in both.
#Classes
| Class | Description |
|---|---|
message | A received turn, at the start of the row. It stands 12px from the turn before it and 4px when both come from the same side |
message-sent | A turn of your own: the row mirrors and the bubble is ink. With message |
message-avatar | The author's avatar, level with the foot of the bubble; it goes on the avatar itself and may be left out |
message-bubble | The words, in a bubble whose tight corner points at the author |
message-meta | A name, a time or a receipt under the bubble |
message-typing | Three dots that rise in turn, inside a bubble that carries role="status" and a label such as "Ada is typing" |
#Custom properties
| Property | Default | Description |
|---|---|---|
--message-radius | 1.125rem | A bubble's corner |
--message-tail | .375rem | The corner that points at the author |