Modal
Modais sobrepõem a tela atual para confirmar ações, exibir mensagens críticas ou coletar dados rápidos sem sair do fluxo.
Quando usar
- Confirmar operações destrutivas antes de prosseguir.
- Capturar informações curtas, como convites, comentários ou aprovações.
- Exibir mensagens importantes que exigem atenção imediata.
- Dar continuidade a um fluxo iniciado por um botão, drawer ou FAB.
Exemplo básico
Modal de confirmação
Por quê: bloqueia o fluxo até que a pessoa confirme ou cancele a operação sensível.
Variantes
Modal com formulário curto
Quando usar: coletar poucos dados sem redirecionar para outra tela. Por quê: mantém o formulário rápido e focado na tarefa atômica.
Modal informativo
Quando usar: comunicar atualizações ou avisos breves com confirmação explícita. Por quê: garante leitura obrigatória antes de fechar a mensagem.
Composição (usando com outros)
- Modal + Button — principal acionador para confirmações.
- Modal + Drawer — fluxos em duas etapas com painel lateral e confirmação.
- Modal + Component Definition — reutiliza layouts de mensagem ou formulário.
Fluxo de aprovação em modal
Por quê: encapsula a estrutura do modal e reaproveita com dados diferentes.
Slots & Props
| Nome | Tipo | Padrão | Descrição | Obrigatório |
|---|---|---|---|---|
nome | identificador | — | Slug do modal (PascalCase recomendado). | Sim |
conteúdo interno | blocos DSL | — | Normalmente envolve card para garantir padding. | Sim |
ações | botões | — | Deve incluir opção de fechar (close ou -1). | Sim |
acionadores | botões/links/FAB | — | Elementos que abrem o modal (@[Abrir](ModalName)). | Sim |
Erros comuns (Do/Don’t)
❌ Errado — Sem botão de fechar
✅ Correto — Botão de fechar presente
Por quê: modais precisam de uma ação clara que devolva o controle à pessoa usuária.
❌ Errado — Fechamentos inconsistentes
✅ Correto — Fechamento consistente
Por quê: adotar um padrão único evita comportamento imprevisível ao fechar o modal.
Referências cruzadas
Relacionados
Drawer: alternativa lateral para fluxos complementares.Button: elemento mais comum para abrir modais.Modal Flow: guia completo para encadear múltiplos modais.Fab: acionador global que pode abrir modais.
Composições recomendadas
- Modal + Button destrutivo → confirma ações críticas antes de executá-las.
- Modal + Drawer → etapa final após ajustes em painel lateral.
- Modal + Component Definition → mensagens padronizadas reaproveitáveis.
Modal confirmado por botão destrutivo
Por quê: CTA destrutivo abre modal que reforça o risco antes da execução.