Skip to Content
ComponentsAtomsAlert

Alert

Atom

Alert vive na página. Ele informa, orienta ou evidencia sem interromper o fluxo como um Dialog.

Use Alert quando a informação precisa permanecer visível até ser resolvida, dispensada ou substituída por um estado novo. Para feedback efêmero, use Toast. Para decisão bloqueante, use Dialog ou Alert Dialog.

Exemplos copiáveis

React

import * as React from "react"
 
type AlertTone = "info" | "success" | "warning" | "destructive" | "evidence"
 
type PulsoAlertProps = React.HTMLAttributes<HTMLDivElement> & {
  tone?: AlertTone
  title: string
  action?: React.ReactNode
}
 
const toneClass: Record<AlertTone, string> = {
  info: "border-[var(--border-strong)] bg-[var(--card)] text-[var(--fg)]",
  success: "border-[var(--risk-stable-border)] bg-[var(--risk-stable-bg)] text-[var(--risk-stable-text)]",
  warning: "border-[var(--risk-attention-border)] bg-[var(--risk-attention-bg)] text-[var(--risk-attention-text)]",
  destructive: "border-[var(--destructive-border)] bg-[var(--destructive-bg)] text-[var(--destructive)]",
  evidence: "border-[var(--border)] bg-[var(--muted)] text-[var(--fg)]",
}
 
export function PulsoAlert({ tone = "info", title, action, children, className, ...props }: PulsoAlertProps) {
  const urgent = tone === "destructive" || tone === "warning"
 
  return (
    <div
      role={urgent ? "alert" : "status"}
      className={[
        "grid gap-2 rounded-[var(--radius-md)] border p-4 text-sm leading-6",
        toneClass[tone],
        className,
      ].filter(Boolean).join(" ")}
      {...props}
    >
      <div className="flex items-start justify-between gap-4">
        <strong className="text-sm font-semibold text-[var(--fg-strong)]">{title}</strong>
        {action ? <div className="shrink-0">{action}</div> : null}
      </div>
      {children ? <div className="text-[var(--fg-muted)]">{children}</div> : null}
    </div>
  )
}
<PulsoAlert title="Fonte temporariamente indisponível" tone="warning">
  Os dados desta fonte podem estar atrasados. Última sincronização há 18 min.
</PulsoAlert>
 
<PulsoAlert title="Resumo assistido pela Cris" tone="evidence">
  Baseado em 12 fontes verificadas. Confiança moderada; revise antes de escalar.
</PulsoAlert>

Alert vs Toast vs Dialog

SuperfíciePersistênciaBloqueia?Uso
AlertPersistenteNãoEstado relevante dentro da página
ToastEfêmeroNãoFeedback curto após ação
DialogAté decisãoSimFoco curto e bloqueante
Alert DialogAté confirmaçãoSimAção destrutiva ou irreversível

Quando usar

  • Estado que precisa permanecer visível.
  • Evidência assistida pela Cris que exige revisão.
  • Degradação de fonte ou sincronização atrasada.
  • Próxima ação clara sem bloquear fluxo.

Quando não usar

  • Para feedback efêmero.
  • Para decisão bloqueante.
  • Para substituir erro inline de campo.
  • Para empilhar múltiplos banners competindo pela atenção.

Acessibilidade

  • Use role="alert" para atenção imediata.
  • Use role="status" para estado informativo não urgente.
  • Título nomeia o estado; descrição explica consequência ou próxima ação.
  • Não dependa só de cor para severidade.

Regras

  1. Alert não bloqueia fluxo.
  2. Use Dialog quando a tarefa precisa parar.
  3. Use Alert Dialog quando há ação destrutiva ou irreversível.
  4. Um banner sólido de alta atenção por página, no máximo.
  5. Alert de evidência precisa apontar origem ou base verificável.
  6. Alert dispensável não pode esconder problema ainda ativo.
Last updated on
Brand ToolkitAlert Dialog