Dados
Balão de mensagem
Chat bubble
Agrupa o texto de uma mensagem e o distingue dentro de uma conversa.
Vamos tirar essa ideia do papel?Ana · 14:30
Vamos! Já comecei a explorar.Você · 14:31 ✓✓
Exemplo didático · Representação visual do padrão
Quando usar
Exibir mensagens com autoria e ordem claras.
Cuidados e acessibilidade
Inclua remetente, horário e estado em texto; alinhamento e cor não devem ser a única pista.
Partes e comportamento
Mensagem, autor, horário e status quando pertinente.
Não confunda
A forma do balão não substitui remetente, conteúdo e estado em uma conversa acessível.
Exemplo de código
<ol aria-label="Conversa">
<li><strong>Ana:</strong> Vamos começar? <time datetime="14:30">14:30</time></li>
</ol>Trecho didático. Integre e teste no contexto do seu projeto.