Logo

Modal Flow

Pré-requisitos

  • Dominar a criação de modal com ações de fechamento consistentes.
  • Mapear o slug de cada etapa (ConfirmInvite, SuccessInvite) para garantir encadeamento.
  • Possuir elementos acionadores (botões, FAB ou list) apontando para o primeiro modal.

Passo a passo

  1. Declare o modal de confirmação com contexto claro e opções de seguir ou cancelar.
  2. Crie o modal de feedback (sucesso ou erro) que será aberto após a confirmação.
  3. Garanta que o CTA do primeiro modal abra o segundo (@[Confirmar](SuccessInvite)).
  4. Adicione botões ou FABs na tela principal apontando para a etapa inicial do fluxo.

Fluxo completo com dois modais encadeados

Proto-Typed
Loading DSL editor...

Por quê: a tela inicia o fluxo, o primeiro modal confirma a ação e o segundo entrega feedback imediato.

Depuração rápida

  • Segundo modal não abre → verifique se o CTA do primeiro modal usa o slug correto (SuccessInvite).
  • Fluxo não fecha → garanta @[Fechar](close) em todas as saídas do último modal.
  • FAB não dispara → confirme que o slug acionado é o primeiro modal da cadeia.
  • Mensagem repetida → consolide textos no modal de sucesso e evite duplicar no card.
  • Usuária presa na confirmação → ofereça sempre um botão de retorno (@ghost[Cancelar](close)).

Próximos passos

  • Aprofunde-se em Modal para explorar variantes de conteúdo.
  • Combine com Drawer quando o fluxo começar em painel lateral.
  • Utilize Fab para ações globais que iniciam o fluxo modal.
  • Consulte Component Composition se precisar reutilizar estrutura de modais.