Chat
Message bubbles for conversations and assistants, with avatars, timestamps and a typing state.
Conversation
Which noodle fits a finance dashboard?
Something calm and precise.
Try Kalguksu: a strict grid, tabular numbers, one green accent.
<div class="mn-chat" role="log" aria-label="Conversation" style="max-width:32rem">
<div class="mn-chat-msg"><span class="mn-avatar mn-avatar-sm" aria-hidden="true">面</span><div class="mn-chat-bubble">Which noodle fits a finance dashboard?</div><div class="mn-chat-meta">Mian assistant · 09:41</div></div>
<div class="mn-chat-msg mn-chat-end"><span class="mn-avatar mn-avatar-sm" aria-hidden="true">AP</span><div class="mn-chat-bubble">Something calm and precise.</div><div class="mn-chat-meta">You · 09:42</div></div>
<div class="mn-chat-msg"><span class="mn-avatar mn-avatar-sm" aria-hidden="true">面</span><div class="mn-chat-bubble">Try Kalguksu: a strict grid, tabular numbers, one green accent.</div><div class="mn-chat-meta">Mian assistant · 09:42</div></div>
<div class="mn-chat-msg"><span class="mn-avatar mn-avatar-sm" aria-hidden="true">面</span><div class="mn-chat-bubble mn-chat-typing" aria-label="Typing"><span class="mn-dots"><span></span><span></span><span></span></span></div></div>
</div>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/chat.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-chat | The conversation. |
| mn-chat-msg · mn-chat-end | A message; mn-chat-end for the current user. |
| mn-chat-bubble | The text. Accepts colour roles. |
| mn-chat-meta | Name, time or status. |
| mn-chat-typing | A bubble holding mn-dots. |
Accessibility
- Use role="log" with aria-live="polite" for a live conversation so new messages are read out.
- Say who sent each message in text (the meta line or a visually hidden span), not only through position or colour.