C10 · Componentes

Dialog

Sobreposição modal focada para confirmações, ações destrutivas ou formulários curtos. Foco preso, fechamento por Escape ou clique no scrim.

01

Estrutura

<div role="dialog" aria-modal="true"
  aria-labelledby="title" aria-describedby="desc">
  <header>
    <h2 id="title">Excluir drop?</h2>
  </header>
  <p id="desc">Esta ação é irreversível.</p>
  <footer>
    <button class="btn-outline">Cancelar</button>
    <button class="btn-destructive">Excluir</button>
  </footer>
</div>
02

Comportamento

  • Foco preso dentro do modal (focus trap).
  • Tecla Escape fecha o modal.
  • Clique no scrim (fundo escurecido) fecha — exceto em modais de ação destrutiva confirmada.
  • Ao fechar, foco retorna para o elemento que abriu o modal.
  • Conteúdo atrás do modal recebe inert ou equivalente.
03

Variantes

TipoQuando usar
BasicConfirmação simples (sair sem salvar?).
DestructiveBotão primário em vermelho semântico para ações irreversíveis.
FormFormulário curto (criar drop, agendar live). Mais que 8 campos = página dedicada.
04

Faça e não faça

Faça

  • Mantenha o título em verbo imperativo claro ('Excluir drop?').
  • Limite a 2 ações no footer — primária à direita, secundária à esquerda.
  • Em destrutivo, exija confirmação textual para ações graves.

Não faça

  • Não aninhe modais.
  • Não use modal para conteúdo longo — use Sheet (C20).
  • Não esconda informação crítica que deveria estar inline.