Skip to Content
ComponentsAtomsAlert Dialog

Alert Dialog

Atom / modal primitive

Alert Dialog é para consequência. Ele deve dizer exatamente o que será afetado e por que confirmar é necessário.

Use quando a ação pode destruir, encerrar, publicar, escalar, sobrescrever ou afetar muitos registros. Para informação persistente não bloqueante, use Alert. Para foco curto sem alto risco, use Dialog.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoAlertDialogProps = {
  open: boolean
  title: string
  description: string
  confirmLabel: string
  cancelLabel?: string
  onConfirm: () => void
  onOpenChange: (open: boolean) => void
}
 
export function PulsoAlertDialog({ open, title, description, confirmLabel, cancelLabel = "Cancelar", onConfirm, onOpenChange }: PulsoAlertDialogProps) {
  const titleId = React.useId()
  const descriptionId = React.useId()
  if (!open) return null
 
  return (
    <div className="fixed inset-0 z-50 grid place-items-center bg-black/45 p-4">
      <section role="alertdialog" aria-modal="true" aria-labelledby={titleId} aria-describedby={descriptionId} className="w-full max-w-md rounded-[var(--radius-lg)] border border-[var(--destructive-border)] bg-[var(--popover)] p-5 shadow-[var(--shadow-lg)]">
        <h2 id={titleId} className="text-lg font-semibold text-[var(--fg)]">{title}</h2>
        <p id={descriptionId} className="mt-2 text-sm leading-6 text-[var(--fg-muted)]">{description}</p>
        <div className="mt-5 flex justify-end gap-2">
          <button type="button" onClick={() => onOpenChange(false)} className="rounded-[var(--radius-md)] border border-[var(--border)] px-4 py-2 text-sm font-medium text-[var(--fg)]">{cancelLabel}</button>
          <button type="button" onClick={onConfirm} className="rounded-[var(--radius-md)] bg-[var(--destructive)] px-4 py-2 text-sm font-semibold text-[var(--destructive-foreground)]">{confirmLabel}</button>
        </div>
      </section>
    </div>
  )
}
<PulsoAlertDialog
  open={open}
  onOpenChange={setOpen}
  title="Encerrar caso PLS-012?"
  description="Esta ação encerra o caso para todos os operadores e registra a decisão no audit trail."
  confirmLabel="Encerrar caso"
  onConfirm={closeCase}
/>

Regras

  1. Título diz o que vai acontecer.
  2. Descrição diz quem/quantos/o quê será afetado.
  3. Botão destrutivo não pode ter label genérico.
  4. Cancelar deve ser claro e seguro.
  5. Ação em massa nomeia o escopo real.
  6. Não esconda incerteza de IA em texto secundário.
Last updated on
AlertAspect Ratio