Modais & Dialogs

Scrim 50% preto. Fechar via ESC, clique no scrim ou botão X. Ações destrutivas sempre em vermelho.

Exemplos Interativos

Conteúdo do modal. Descreva claramente a ação ou informação que o usuário precisa.

Você está prestes a excluir permanentemente a organização Empresa ABC e todos os seus dados.

Esta ação não pode ser desfeita.

Digite EXCLUIR para confirmar

✓Scrim bg-black/50 — forte o suficiente para isolar conteúdo

✓Fechar: ESC, clique no scrim, botão X — todos funcionam

✓Ação cancelar sempre à esquerda, confirmar à direita

✓Destrutivo: ícone de alerta + vermelho + confirmação textual

✓role="dialog" aria-modal para acessibilidade

✗Modal sem botão de fechar explícito

✗Ação destrutiva sem step de confirmação

✗Usar modal para fluxo de navegação principal