---
type: rule
name: modal-dialog-padrao-betha
description: Define a estrutura obrigatória de modais e dialogs MUI no padrão Betha — header escuro, body branco, footer cinza — para frontends React de gestão pública
scope: global
trigger: model_decision
priority: alta
updatedAt: "2026-10-14"
---

# Regra: Padrão Modal/Dialog MUI — Estrutura Betha

Nos projetos cujo `memorias-ia/modulo.yml` indica frontend React/MUI com estilo governamental/Betha, todo modal/dialog em `<modulo>-front` deve seguir a estrutura visual Betha: **header escuro + body branco + footer cinza**.

## Estrutura Obrigatória

```typescript
<Dialog
  open={open}
  onClose={onClose}
  PaperProps={{
    sx: {
      borderRadius: "0.25rem",
      boxShadow: "0 0.5rem 1rem rgba(0,0,0,.15)",
    }
  }}
>
  {/* HEADER — escuro */}
  <DialogTitle
    sx={{
      backgroundColor: "#343a40",
      color: "#ffffff",
      padding: "0.75rem 1rem",
      position: "relative",
    }}
  >
    Título do Modal
    <IconButton
      onClick={onClose}
      size="small"
      sx={{ position: "absolute", right: 8, top: 8, color: "#ffffff" }}
    >
      <CloseIcon fontSize="small" />
    </IconButton>
  </DialogTitle>

  {/* BODY — branco */}
  <DialogContent sx={{ backgroundColor: "#ffffff", padding: "1rem" }}>
    {/* conteúdo */}
  </DialogContent>

  {/* FOOTER — cinza claro */}
  <DialogActions
    sx={{
      backgroundColor: "#f8f9fa",
      borderTop: "1px solid #dee2e6",
      padding: "0.75rem 1rem",
    }}
  >
    <Button variant="outlined" color="secondary" onClick={onClose}>
      Cancelar
    </Button>
    <Button variant="contained" color="primary" onClick={onConfirm}>
      Confirmar
    </Button>
  </DialogActions>
</Dialog>
```

## Tokens dos Estilos

| Região | Cor | Hex |
|--------|-----|-----|
| DialogTitle bg | Dark | `#343a40` |
| DialogTitle color | Branco | `#ffffff` |
| DialogContent bg | Branco | `#ffffff` |
| DialogActions bg | Light | `#f8f9fa` |
| DialogActions border | Border | `#dee2e6` |
| Dialog shadow | — | `0 0.5rem 1rem rgba(0,0,0,.15)` |
| Dialog radius | — | `0.25rem` |

## Botões de Ação

| Papel | Variante | Cor |
|-------|---------|-----|
| Cancelar / Fechar | `outlined` | `secondary` |
| Confirmar / Salvar | `contained` | `primary` |
| Destrutivo (excluir) | `contained` | `error` |

## Regras

✅ **Correto:** sempre usar `IconButton` com `CloseIcon` no `DialogTitle` em posição `absolute`  
✅ **Correto:** `DialogActions` sempre com `borderTop` e `backgroundColor` cinza  
❌ **Incorreto:** header branco ou sem cor de fundo definida  
❌ **Incorreto:** botões sem variante e cor explícitas  
❌ **Incorreto:** usar `Modal` nu do MUI — sempre usar `Dialog` com as 3 regiões  

## Impacto

Evita modais com aparências inconsistentes entre telas e garante conformidade com a identidade visual exigida.

## Referências

- Identidade do Módulo: `memorias-ia/modulo.yml`
- Rule: `theme-provider-mui-betha`
- Rule: `estilos-design-system`