Alert Dialog
Diálogos de alerta para confirmações, avisos e ações destrutivas. Dois tipos: Primary (vertical, centrado, alertas principais) e Secondary (horizontal, alinhado à esquerda, alertas complementares). Quatro variantes de cor: Neutral, Success, Warning e Destructive. Dark mode automático.
Variantes
Clique nos botões para abrir cada variante. Clique no backdrop ou nos botões internos para fechar.
Primary
Neutral - 2 botões
Success - 2 botões
Warning - 1 botão
Destructive - 2 botões
Secondary
Neutral - 2 botões
Success - 1 botão
Warning - 2 botões
Destructive - 2 botões
Propriedades
Classes disponíveis para configurar o alert dialog.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.alert-dialog-backdrop | classe | — | Overlay fixo cobrindo a tela (z-index 1060). |
.is-open | classe | — | Ativa visibilidade do backdrop e dialog. |
.alert-dialog | classe | — | Container do diálogo. |
.alert-dialog--primary | classe | — | Layout vertical, centrado, botões large (40px). |
.alert-dialog--secondary | classe | — | Layout horizontal, alinhado à esquerda, botões small (32px). |
.alert-dialog--neutral | classe | — | Ícone neutro (cor padrão). |
.alert-dialog--success | classe | — | Ícone verde (sucesso). |
.alert-dialog--warning | classe | — | Ícone amarelo (aviso). |
.alert-dialog--destructive | classe | — | Ícone vermelho + botão filled vermelho. |
.alert-dialog-icon | classe | — | Container circular 40x40 com borda e ícone 18x18. |
.alert-dialog-content | classe | — | Wrapper de texto + footer. Gap varia por tipo (40px primary, 24px secondary). |
.alert-dialog-text | classe | — | Container de título + descrição (gap 8px). |
.alert-dialog-title | classe | — | Título (p2 medium). |
.alert-dialog-description | classe | — | Descrição (p3 regular, cor secundária). |
.alert-dialog-footer | classe | — | Container dos botões (gap 12px). |
Código
Snippets prontos para copiar e usar.
Primary - Neutral (2 botões)
html
<div class="alert-dialog-backdrop is-open">
<div class="alert-dialog alert-dialog--primary alert-dialog--neutral">
<div class="alert-dialog-icon">
<!-- icons/Character/info -->
<svg viewBox="0 0 48 48" fill="none">
<path d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4
4 12.954 4 24s8.954 20 20 20z"
stroke="currentColor" stroke-width="3" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24 11a2.5 2.5 0 110 5 2.5 2.5 0 010-5z"
fill="currentColor"/>
<path d="M24.5 34V20h-2" stroke="currentColor" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 34h7" stroke="currentColor" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="alert-dialog-content">
<div class="alert-dialog-text">
<h3 class="alert-dialog-title">Confirmar ação</h3>
<p class="alert-dialog-description">
Tem certeza de que deseja realizar esta ação?
</p>
</div>
<div class="alert-dialog-footer">
<button class="btn btn-outlined">Cancelar</button>
<button class="btn btn-filled">Confirmar</button>
</div>
</div>
</div>
</div>Primary - Destructive (1 botão)
html
<div class="alert-dialog-backdrop is-open">
<div class="alert-dialog alert-dialog--primary alert-dialog--destructive">
<div class="alert-dialog-icon">
<!-- icons/Character/attention -->
<svg viewBox="0 0 48 48" fill="none">
<path d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4
4 12.954 4 24s8.954 20 20 20z"
stroke="currentColor" stroke-width="3" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24 37a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"
fill="currentColor"/>
<path d="M24 12v16" stroke="currentColor" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="alert-dialog-content">
<div class="alert-dialog-text">
<h3 class="alert-dialog-title">Excluir registro</h3>
<p class="alert-dialog-description">
Todos os dados serão removidos permanentemente.
</p>
</div>
<div class="alert-dialog-footer">
<button class="btn btn-filled">Excluir</button>
</div>
</div>
</div>
</div>Secondary - Warning (2 botões)
html
<div class="alert-dialog-backdrop is-open">
<div class="alert-dialog alert-dialog--secondary alert-dialog--warning">
<div class="alert-dialog-icon">
<!-- icons/Safe/caution -->
<svg viewBox="0 0 48 48" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24 5L2 43h44L24 5z"
stroke="currentColor" stroke-width="3" stroke-linejoin="round"/>
<path d="M24 35v1" stroke="currentColor" stroke-width="3"
stroke-linecap="round"/>
<path d="M24 19l.008 10" stroke="currentColor" stroke-width="3"
stroke-linecap="round"/>
</svg>
</div>
<div class="alert-dialog-content">
<div class="alert-dialog-text">
<h3 class="alert-dialog-title">Alterações não salvas</h3>
<p class="alert-dialog-description">
Deseja descartar as alterações?
</p>
</div>
<div class="alert-dialog-footer">
<button class="btn btn-filled">Descartar</button>
<button class="btn btn-outlined">Voltar</button>
</div>
</div>
</div>
</div>Uso com JavaScript
js
// Abrir
document.querySelector('.alert-dialog-backdrop').classList.add('is-open');
document.body.style.overflow = 'hidden';
// Fechar
document.querySelector('.alert-dialog-backdrop').classList.remove('is-open');
document.body.style.overflow = '';