Componentes
Badge
Etiqueta de estado com raio 6, nunca pílula. O ponto diz que o estado está vivo. O app mapeia o domínio para um tom do Core.
Exemplos#
Tons do Core
Códigos curtos · code
O app mapeia domínio → tom
Importar#
import { Badge, badgeTones } from "@hiboupay/react";
import type { BadgeProps, BadgeTone } from "@hiboupay/react";Quando usar#
Use quando
- Estado de um item: aplicado, aguardando, falhou.
- Código curto (P0, L2, v1) com code.
- Categoria discreta em tabela ou cartão.
Não use quando
- Ação clicável: use Button.
- Filtro: use FilterChip.
- Texto longo.
Variantes#
default
Neutro.
muted
Expirado, inativo.
primary
Em andamento, agente.
secondary
Rascunho.
success
Concluído, aplicado.
warning
Aguardando decisão.
danger
Falhou.
night
Nível, código de destaque.
Anatomia#
- 01Contêiner 20px, raio 6, anel interno
- 02Ponto opcional em currentColor
- 03Rótulo 11px (ou mono 11 com code)
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| tone | "default" | "muted" | "primary" | "secondary" | "success" | "warning" | "danger" | "night" | "default" | Tom do Core. |
| dot | boolean | false | Ponto que indica estado vivo. |
| code | boolean | false | Mono em caixa, para códigos curtos (P0, L2, v1). |
| ...props | HTMLAttributes<HTMLSpanElement> | Atributos de <span>. |
Acessibilidade#
Teclado
Leitor de tela
- —Lido como texto. Se o estado for só cor, o rótulo precisa dizer o estado.
- —O ponto é aria-hidden.
Boas práticas#
Faça
- Rótulo de uma ou duas palavras, minúsculas.
- Mapear domínio → tom no app.
Evite
- Criar tom novo no Core para um domínio.
- Pílula totalmente arredondada.
- Badge clicável.
Conteúdo#
- —Minúsculas, particípio ou substantivo: "aplicado", "rascunho".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Dados
Avatar
Iniciais em Sora sobre uma cor de token: Vivid Blue, Graffiti, success-ink, warning-ink ou danger-ink. A cor vem do e-mail, então a mesma pessoa tem sempre a mesma cor. Ninguém atribuído é tracejado.
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.