Componentes
SummaryList
Resumo de uma decisão: rótulo à esquerda, valor tabular à direita, linha fina entre as duas. O total é a única linha que grita. Papel sozinho; flush dentro de outro cartão.
Exemplos#
Resumo do pedido
- Bolsa Tote Ecológica
- R$ 189,00
- Tênis Casual Unissex
- R$ 329,00
- Carteira Slim RFID2 ×
- R$ 476,00
- Frete
- Grátis
- Total a pagar
- R$ 994,00
Resumo do pedido · o total é a única linha que grita
- Valor solicitado
- R$ 2.334,00
- Parcelamento
- 12× de R$ 223,04
- Primeiro descontoNa folha de setembro
- 15/09/2026
- Total a pagar
- R$ 2.676,48
Condições da proposta
Mesa
- Subtotal
- R$ 2.800,00
- Desconto
- -R$ 80,00
- Taxa
- R$ 18,40CET
- Total a pagar
- R$ 2.738,40
Celular · 390
- Subtotal
- R$ 2.800,00
- Desconto
- -R$ 80,00
- Taxa
- R$ 18,40CET
- Total a pagar
- R$ 2.738,40
Desconto em verde · taxa em âmbar · no estreito o valor desce
Importar#
import { SummaryList } from "@hiboupay/react";
import type { SummaryListProps, SummaryRow, SummaryMaterial, SummaryTone } from "@hiboupay/react";Quando usar#
Use quando
- Resumo do pedido antes de pagar.
- Condições da proposta: valor, parcela, primeiro desconto.
- Painel de detalhe de um registro.
Não use quando
- Muitas linhas comparáveis com ordenação: DataTable.
- Um número em destaque: MetricWidget.
- Formulário editável: Field.
Variantes#
papel
Cartão próprio. O padrão.
flush
Sem raio, sombra nem padding. Para dentro de Card ou Modal.
Anatomia#
- 01Papel com raio 16, ou flush sem cartão
- 02Rótulo mono opcional no topo
- 03dl com linhas divididas
- 04Valor em hb-num alinhado à direita
- 05Tom success ou warning no valor
- 06hintValue na segunda linha à direita
- 07Linha de ênfase para o total
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| rows* | SummaryRow[] | { label, value?, hint?, hintValue?, emphasis?, tone? }. | |
| title | ReactNode | Rótulo de máquina acima da lista. | |
| material | "paper" | "flush" | "paper" | flush tira o cartão. |
| loading | boolean | false | Skeleton no lugar de cada valor. |
| SummaryRow.hint | ReactNode | Segunda linha à esquerda: quantidade, prazo, identificador. | |
| SummaryRow.hintValue | ReactNode | Segunda linha à direita: "12x". | |
| SummaryRow.tone | "success" | "warning" | Desconto é success. Taxa é warning. Sem danger. | |
| SummaryRow.emphasis | boolean | false | Fecha a conta. Use em uma linha só. |
Acessibilidade#
Teclado
Leitor de tela
- —dl com dt e dd: o leitor lê rótulo e valor em par.
- —Carregando: aria-busy na lista.
Boas práticas#
Faça
- Valor sempre com moeda e em pt-BR — use formatBRL.
- Uma linha de ênfase por lista.
Evite
- Célula vazia com "—" ou "N/A": deixe vazia.
- Três totais competindo pela mesma atenção.
Conteúdo#
- —Rótulo curto e substantivo: "Valor solicitado", "Total a pagar".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Dados
DataTable
Tabela de trabalho em papel. Linha de 48 (36 no denso), cabeçalho de máquina que ordena, número à direita em Sora tabular. O link da linha é o alvo do teclado.
Dados
MetricWidget
Métrica: rótulo de máquina, número em Sora tabular, contexto embaixo. O tom é luz, não faixa. Bar mostra proporção.
Entrada
ChoiceCard
Escolha que precisa mostrar o preço da decisão. É o Radio quando a opção não cabe numa linha: ícone, título, explicação e o total no pé. Marca no canto, luz azul quando ativo.