Componentes · z-ui

ScreenStep

A tela de uma etapa do fluxo: rótulo da etapa, título, subtítulo, conteúdo e ações. Se onNext devolve uma Promise, o botão de avançar fica bloqueado com indicador até ela terminar, e cliques repetidos são ignorados.

Avançar assíncrono

Clique em Confirmar dados várias vezes: só uma validação é disparada.

Etapa 1 de 4

Confira seus dados

Marina Couto enviou o contrato de locação para você assinar.

Nome completo

CPF

Os dados estão corretosSe algo estiver errado, recuse e avise a remetente.

<ScreenStep
  stepLabel="Etapa 1 de 4"
  title={<>Confira <ScreenStepHighlight>seus dados</ScreenStepHighlight></>}
  subtitle="Marina Couto enviou o contrato de locação."
  actions={{ onBack, onNext: validateData, nextDisabled: !confirmed }}
>
  {campos}
</ScreenStep>

Layouts de ação

dual mostra Voltar e Continuar; single-back só o voltar, para telas finais de erro; single-next só o avançar, para a primeira etapa.

Etapa 2 de 4

Leia o documento

Role até o fim para liberar a próxima etapa.

contrato-locacao.pdf · 12 páginas

Link expirado

Este link não vale mais

O envelope expirou em 15/10/2026. Peça um novo envio para a remetente.

Ações próprias

actions também aceita um ReactNode, que é renderizado no rodapé sem alteração.

Etapa 4 de 4

Assine o documento

Sua assinatura será aplicada nos 3 campos marcados para você.

Props

Prop	Tipo	Padrão	Descrição
stepLabel	string	—	Rótulo acima do título, como “Etapa 1 de 4”.
title	ReactNode	—	Título da etapa. Use ScreenStepHighlight para destacar um trecho.
subtitle	ReactNode	—	Explicação abaixo do título.
titleAs	"h1" \| "h2" \| "h3"	"h1"	Nível do título. A seção é rotulada por ele.
actions	ScreenStepActionsConfig \| ReactNode	—	Configuração dos botões padrão ou rodapé próprio.
actions.layout	"dual" \| "single-back" \| "single-next"	"dual"	Quais botões aparecem.
actions.onNext	() => void \| Promise<unknown>	—	Se devolver Promise, bloqueia o avançar até ela terminar.
actions.onBack	() => void	—	Clique em voltar. Fica bloqueado enquanto onNext roda.
actions.nextLabel / backLabel	string	"Continuar" / "Voltar"	Textos dos botões.
actions.nextDisabled / backDisabled	boolean	false	Desabilita cada botão.