DataList
Lista de dados com pares de rótulo e valor para os detalhes de um registro, como um pedido, um perfil ou um servidor. Para comparar vários registros, use uma tabela.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no servidor.
import { DataList, DataListTerm, DataListDetail, DataListItem } from "@camaleo/react";Anatomia
Uma lista de descrição nativa: uma grade de duas colunas em que cada termo (<dt>) fica ao lado do seu valor (<dd>). O DataListItem renderiza um par sem acrescentar nenhum elemento em volta.
Exemplos
Todo exemplo é um arquivo de verdade que você pode copiar. Todos usam o estilo, o modo e a marca escolhidos na barra acima.
- Pedido
- #4821
- Cliente
- Padaria Estrela
- Feito em
- 24/10/2026
- Total
- R$ 1.240,00
- Status
- Pago
- Pagamento
- Pix, à vista
- Envio
- Expresso, 2 dias úteis
Status num badge
Use um badge no valor quando ele for um estado que a pessoa procura de olho, como Pago. Para o resto, texto simples é mais fácil de ler.
- Telefone
- (11) 3456-7821
- Contato reserva
- Não informado
- Rastreio
- Etiqueta não impressa
Valores ausentes
Mantenha a linha e diga o que falta, como "Não informado", numa cor mais discreta. Um traço ou uma célula vazia passa despercebido, e alguns leitores de tela pulam.
- compras@padariaestrela.com.br
- Telefone
- (11) 3456-7821
Links de e-mail e telefone
Transforme o valor em link quando ele abre algo, como mailto: ou tel:. O texto do link é o próprio valor, então ele continua claro fora de contexto.
- Entregar em
- Rua Augusta, 1508, apto. 32
Consolação, São Paulo – SP, 01304-001 - Observações
- Se ninguém atender, deixe a caixa com o porteiro. A campainha do portão lateral não funciona.
Valores longos
Endereços e observações quebram em várias linhas. Alinhe o termo no topo, para ele ficar ao lado da primeira linha em vez de flutuar no meio.
- Plano
- Equipe, cobrança anual
- Licenças
- 12 de 15 em uso
- Renova em
- 01/03/2027
Pares a partir de dados
Quando os pares vêm de um array, transforme cada um num DataListItem com term. Ele renderiza o <dt> e o <dd> para você, sem elemento extra dentro do <dl>.
- Chave publicável
pk_test_51Msz82K901La4Z
Copiar um valor
Clique no botão para copiar a chave. O nome dele diz o que copia, e uma mensagem de status anuncia o resultado, porque só um ícone novo não diz nada ao leitor de tela.
Em contexto
Uma lista de dados costuma ficar abaixo de um título que dá nome ao registro, com as ações do registro ao lado. Estes são pedaços inteiros de interface que você pode copiar, no estilo que escolheu.
Pedido #4821
Pago- Cliente
- Padaria Estrela
- Feito em
- 24/10/2026
- Total
- R$ 1.240,00
- Pagamento
- Pix, à vista
- Envio
- Expresso, 2 dias úteis
- Entregar em
- Rua Augusta, 1508, apto. 32
Consolação, São Paulo – SP, 01304-001
Aline Prado
aline.prado@vilanova.design- Cargo
- Arquiteta de front-endAdmin
- Equipe
- Design system
- Fuso horário
- São Paulo (UTC−3)
- Entrou em
- 15/03/2023
web-prod-2
Em execução- Tipo de instância
c6g.2xlarge- CPU e memória
- 8 vCPUs · 16 GB
- Região
- sa-east-1 (São Paulo)
- IPv4 público
177.71.182.49
Boas práticas
- Telefone
- (11) 3456-7821
- Contato reserva
- Não informado
"Não informado" mostra que o campo existe e está vazio, e não que a página falhou ao carregar.
- Telefone
- (11) 3456-7821
- Contato reserva
Uma célula em branco parece erro, e a pessoa não sabe se o dado falta ou se ainda está carregando.
- compras@padariaestrela.com.br
- Telefone
- (11) 3456-7821
A pessoa passa o olho pelos termos para achar uma linha. Termos curtos deixam espaço para os valores, até no celular.
- O endereço de e-mail que usamos para falar com você sobre este pedido
- compras@padariaestrela.com.br
- Telefone
- (11) 3456-7821
A coluna dos termos cresce, os valores ficam espremidos, e o título acima já dá o contexto.
Props
DataListTerm (<dt>).DataListDetail (<dd>). Sem term, os filhos aparecem como estão, sem nada em volta.DataListTerm.DataListDetail.DataList, DataListTerm e DataListDetail aceitam os atributos de <dl>, <dt> e <dd>.
Styling hooks
Mude o visual sem copiar o componente: use os slots ou defina os tokens num elemento pai, num estilo ou na própria lista.
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- O DataList renderiza um <dl> nativo, então o leitor de tela anuncia uma lista e lê cada termo com o seu valor.
- Coloque DataListTerm e DataListDetail direto dentro do DataList, em pares. O DataListItem não acrescenta nada em volta, então também pode.
- Dê nome ao registro com um título acima da lista, para a pessoa poder pular até ele e saber de quem são os detalhes.
- Botões dentro de um valor precisam de um nome que diga sobre o que agem, como "Copiar chave publicável", e de uma mensagem de status para o resultado.