Thread
Message bubbles; your own sit at the end in the tone.
Examples
Thread
Can we ship the glass without the rim?
Yes. Tone and shadow carry the edge now.
Pushing in a minute.
Perfect.
Anatomy
.thread | Column of bubbles. |
> .bubble | One message on a tinted fill at the start, held to a reading measure. Bubbles in a run from the same side sit closer together. |
> .bubble[data-self] | Your own message: at the end, solid in the tone. |
.bubble > time | Optional meta line below the text, extra small and muted. A <small> works the same. |
API
| Attribute | Values | Description |
|---|---|---|
data-selfon .bubble | boolean | Marks a message as yours: end-aligned, tone fill, contrast text. |
data-toneon .bubble | accentsuccesswarningdangerinfo | Changes the tone of a data-self bubble. Default accent. |
Accessibility
- Side and colour are the only signs of who wrote a message. Add the sender in text, visible or
.sr-only, so screen readers can tell. - For a live conversation, put
role="log"on.threadso new messages are announced as they arrive. - Give
<time>adatetimeattribute; "09:38" alone has no date.