Comment

Componente de discussão com avatar, autor, timestamp, conteúdo e ações. Suporta aninhamento para respostas em thread. Usado para discussão em processos, pareceres técnicos e anotações. Dark mode automático via variáveis semânticas.

components/comment.css

Uso

Quando e como utilizar o componente de comentário.

• Comentário único — Estrutura básica com avatar, autor, data e conteúdo.
• Lista de comentários — Múltiplos comentários em sequência via .comment-list.
• Respostas aninhadas — Thread de respostas indentadas via .comment__children.
• Destacado — Comentário com fundo de destaque via .comment--highlighted.
• Com área de resposta — Formulário integrado via .comment__reply.

Exemplos

Veja abaixo os exemplos interativos do componente de comentário.

Carregando exemplo...

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descrição
Container	.comment	Flex horizontal (avatar + body)
Avatar	.comment__avatar	Círculo 32px com foto ou iniciais
Body	.comment__body	Container flex: 1
Header	.comment__header	Autor + timestamp
Conteúdo	.comment__content	Texto do comentário
Ações	.comment__actions	Links de responder, editar, excluir
Respostas	.comment__children	Container indentado com border-left
Resposta	.comment__reply	Textarea + botões
Lista	.comment-list	Container vertical com gap

Propriedades

Classes e estados disponíveis.

Propriedade	Tipo	Default	Descrição
.comment	classe	—	Container de um comentário individual.
.comment__avatar	classe	—	Avatar do autor (32x32, circular).
.comment__avatar--placeholder	classe	—	Placeholder com iniciais quando não há foto.
.comment__body	classe	—	Container do conteúdo (flex: 1).
.comment__header	classe	—	Linha com autor e timestamp.
.comment__author	classe	—	Nome do autor (14px w600).
.comment__time	classe	—	Timestamp do comentário (12px secundário).
.comment__content	classe	—	Texto do comentário.
.comment__actions	classe	—	Ações: responder, editar, excluir.
.comment__actions-item	classe	—	Botão de ação individual.
.comment__children	classe	—	Respostas aninhadas (indentadas com border-left).
.comment__reply	classe	—	Área de resposta com textarea.
.comment-list	classe	—	Container para múltiplos comentários.
.comment--highlighted	estado	—	Comentário destacado (fundo amarelo sutil).
.comment--editing	estado	—	Modo edição do comentário.

Código

Snippets prontos para copiar e usar no seu projeto.

Comentário básico

<div class="comment">
  <div class="comment__avatar">
    <img src="foto.jpg" alt="Ana Silva" />
  </div>
  <div class="comment__body">
    <div class="comment__header">
      <span class="comment__author">Ana Silva</span>
      <span class="comment__time">há 2 horas</span>
    </div>
    <p class="comment__content">Texto do comentário.</p>
    <div class="comment__actions">
      <button class="comment__actions-item">Responder</button>
      <button class="comment__actions-item">Editar</button>
    </div>
  </div>
</div>

Com placeholder de avatar

<div class="comment__avatar comment__avatar--placeholder">AS</div>

Lista com respostas aninhadas

<div class="comment-list">
  <div class="comment">
    <div class="comment__avatar"><!-- ... --></div>
    <div class="comment__body">
      <!-- header, content, actions -->
      <div class="comment__children">
        <div class="comment">
          <!-- resposta aninhada -->
        </div>
      </div>
    </div>
  </div>
</div>

Design

Especificações visuais e tokens utilizados.

Especificações

Propriedade	Valor
Avatar	32x32 circular
Gap avatar-body	12px
Autor	Inter 14px w600
Timestamp	Inter 12px
Conteúdo	Inter 14px, line-height 1.6
Ações	Inter 12px w500
Indent filhos	20px margin-left + 20px padding-left
Border filhos	2px solid

Tokens utilizados

Elemento	Token
Autor	--text-base-neutral-default
Timestamp	--text-base-neutral-secondary
Conteúdo	--text-base-neutral-default
Ações	--text-base-neutral-secondary → hover: --text-base-brand-default
Border filhos	--border-base-neutral-default
Highlighted bg	--surface-base-alert-container-warning

Versão0.2.0

Última atualização15 mar 2026

Caminhosrc/components/comment.css