Stat
Estatística — mostra um número importante, o que ele mede e quanto mudou, como a receita do mês. Use uma fileira deles no topo de um painel.
trend
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no servidor.
import { Stat, StatLabel, StatValue, StatHelpText, StatDelta } from "@camaleo/react";Anatomia
Um <article> com o rótulo, o valor e uma linha de apoio. A variação costuma ficar dentro da linha de apoio, antes da comparação. Cada parte tem um data-slot que você pode usar no CSS.
stat <article>
stat-label <span>
stat-value <span>
stat-help <span>
stat-delta <span> · seta + variação
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o skin, o modo e a marca escolhidos na barra acima.
Em alta
trend="up" coloca uma seta e a cor de sucesso. Sempre diga com o que você compara, como "em relação a setembro", senão a variação não quer dizer nada.
Em queda
trend="down" deixa a seta e a cor em tom de perigo. Escreva a variação na unidade do valor: pontos percentuais para uma taxa, não percentual de percentual.
Quando cair é bom
Em cancelamentos, latência ou custos, uma queda é boa notícia. Use sentiment="positive" para manter a seta para baixo com a cor de sucesso.
Sem mudança
neutral (o padrão) não mostra seta e usa uma cor discreta. Use quando a variação for zero ou pequena demais para importar.
Comparado com a meta
A linha de apoio pode comparar com uma meta em vez de um período anterior. A pessoa vê quanto falta sem precisar ler um segundo número.
Ícone próprio
Passe icon para usar os ícones do seu produto, ou icon={null} para mostrar só o número. Dê aria-hidden ao ícone, como na seta padrão.
42+6
Sem linha de apoio
Num stat compacto, sem linha de apoio, acrescente a comparação com VisuallyHidden. Assim o leitor de tela fala "+6 desde ontem", e não um número solto.
Trocando o período
Escolha outro período. O grupo de toggles mantém a opção pressionada e o stat atualiza no lugar, sem pular o rótulo nem o layout.
Em contexto
Stats costumam aparecer em fileiras de três ou quatro dentro de um card, com um título para o grupo. Estas são partes inteiras de interface que você pode copiar, no skin que escolheu.
Desempenho da loja, outubro de 2026
Painel da lojaCard · Stat
Assinaturas, 3º tri de 2026
Dentro da metaMétricas de assinaturaCard · Stat · Badge
Saúde do cluster
sa-east-1Saúde do servidorCard · Stat · Badge
Boas práticas
FaçaEscreva o sinal no texto.
A seta fica escondida do leitor de tela e nem todo mundo enxerga a cor. "+14,2%" diz a direção para todos.
EviteDireção só pela cor.
Sem o sinal e sem a seta, "14,2%" em verde parece um número qualquer para muita gente.
FaçaFormate o valor e mostre a unidade.
Moeda, separador de milhar e símbolo de porcentagem dizem o que é o número antes mesmo do rótulo.
EviteNúmeros crus.
"48250" e "14,2" deixam a pessoa adivinhando: reais ou pedidos, percentual ou pontos.
Props
PropriedadeTipoPadrãoDescrição
trendStatTrend"neutral"Para onde o número foi. Define a seta (
neutral fica sem seta) e, se sentiment não vier, a cor.sentimentStatSentiment"positive" for `trend="up"`, "negative" for `trend="down"`, otherwise "neutral"Se a mudança é boa notícia:
positive é verde, negative é vermelho. Use quando cair é bom, como em cancelamentos ou latência: trend="down" sentiment="positive". A cor é só visual; o texto precisa dizer o que aconteceu. Padrão: positive com trend="up", negative com trend="down", senão neutral.iconReactNode—Substitui a seta. Passe
null para mostrar só o número. A seta fica escondida do leitor de tela, então o texto precisa trazer o sinal.Stat aceita os atributos de <article>; StatLabel, StatValue e StatHelpText, os de <span>.
Styling hooks
Mude o visual sem fazer fork: use os atributos ou defina os tokens num elemento pai, num skin ou no próprio stat.
Atributos
data-trendup · down · neutral (no stat-delta)
data-sentimentpositive · negative · neutral (no stat-delta, define a cor)
Tokens que ele lê
Cor
--cml-border-control--cml-card-border--cml-card-shadow--cml-danger--cml-fg--cml-fg-secondary--cml-success--cml-surface-raised
Forma e tamanho
--cml-border-width--cml-radius-popover
Tipografia e movimento
--cml-font-control--cml-font-display--cml-font-label--cml-font-weight-display
Só deste componente
--cml-corner-shape--cml-stat-bg--cml-stat-border--cml-stat-label-size--cml-stat-label-tracking--cml-stat-label-transform--cml-stat-label-weight--cml-stat-padding--cml-stat-radius--cml-stat-value-font--cml-stat-value-size--cml-stat-value-weight
Acessibilidade
TabO stat não recebe foco. O Tab só passa pelos botões ou links que você colocar dentro dele.
- O leitor de tela lê as partes na ordem: rótulo, valor, variação e comparação. Mantenha essa ordem no código.
- A seta padrão tem aria-hidden e a cor é só visual, então o sinal no texto (+ ou −) precisa dizer a direção.
- Não use aria-label no StatDelta: ele é um span comum e a maioria dos leitores de tela ignora o rótulo ali. Acrescente palavras com VisuallyHidden.
- O StatValue usa números tabulares, então os dígitos não se mexem quando o valor atualiza.
Relacionados
CardO contêiner que agrupa uma fileira de stats sob um título.MeterMostra um valor dentro de uma faixa conhecida, como o uso de disco, em forma de barra.Data listPares de rótulo e valor para os detalhes de um registro.
Esta página foi útil? · Editar esta página no GitHub