Componentes
Stepper
Onde a pessoa está numa jornada de poucos passos. Concluído vira check e nunca volta a ser número. No horizontal estreito cabe só o número; no vertical a descrição fica.
Exemplos#
Mesa
Celular · 390
Com rótulo no desktop, só número no celular
Mesa
Celular · 390
Vertical quando cada passo precisa de uma linha
Importar#
import { Stepper } from "@hiboupay/react";
import type { StepperProps, Step, StepStatus, StepperOrientation } from "@hiboupay/react";Quando usar#
Use quando
- Checkout em etapas.
- Onboarding, cadastro ou KYC em mais de duas telas.
- Qualquer fluxo em que voltar é possível e o fim é conhecido.
Não use quando
- Processo de duração desconhecida: Progress.
- Duas vistas do mesmo dado: Tabs.
- Mais de seis passos — quebre o fluxo.
Variantes#
horizontal
Discos em linha. Abaixo de md vira "N de M · rótulo".
vertical
Lista com descrição por passo. Serve onboarding e KYC.
Anatomia#
- 01nav com ol
- 02Disco 32px por passo
- 03Conector que acende até o passo atual
- 04Rótulo opcional
- 05Descrição no vertical
- 06Resumo "N de M" só no horizontal estreito
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| steps* | Step[] | { id, label?, description?, status? }. Sem label vira só o número. | |
| current* | number | Índice base 0. Tudo antes está concluído, salvo status error. | |
| orientation | "horizontal" | "vertical" | "horizontal" | Vertical mostra a descrição e não some no celular. |
| onStepClick | (index: number) => void | Só o passo concluído vira botão. Pendente nunca é botão. | |
| label | string | "Progresso" | Nome da jornada para o leitor de tela. |
| Step.status | "complete" | "current" | "upcoming" | "error" | error pinta o disco em danger-ink. KYC recusado. | |
| Step.description | string | Uma linha sob o rótulo, no vertical. |
Acessibilidade#
Teclado
Leitor de tela
- —nav nomeada, ol de passos. O passo atual tem aria-current="step".
- —Cada passo declara concluído, atual, pendente ou com erro em texto oculto.
Boas práticas#
Faça
- Rótulo com substantivo: "Endereço", "Pagamento".
- No celular horizontal, só o resumo. Vertical quando cada passo precisa de descrição.
Evite
- Deixar o passo pendente clicável.
- Contar passos que a pessoa não controla (processamento).
Conteúdo#
- —"Etapa 2 de 4" no título da página; o Stepper mostra, não repete.
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Estado
Progress
Trilha wash. Com número, o corpo é Graffiti e a ponta é Vivid Blue. Indeterminado: a coruja trabalha e a barra desliza.
Entrada
Tabs
Segmento: trilho rebaixado com um papel que desliza até a aba ativa. Linha: sublinhado azul para conteúdo longo. Base Radix.
Estado
StatusView
Tela inteira que só tem um estado para contar: vazio, esperando, aprovado ou falhou. Um desenho para os quatro; o tom troca o ícone no tile branco. EmptyState é o preset neutro.