Skip to Content
ComponentsAtomsSonner

Sonner

Atom

Sonner representa a camada de toast. Ele confirma feedback curto; não substitui alerta, diálogo ou log de auditoria.

Use para ações concluídas, cópia, salvamento leve ou falhas recuperáveis. Em operações de crise, toasts não podem ser o único lugar onde risco, consequência ou ação obrigatória aparece.

Exemplos copiáveis

React

import * as React from "react"
 
type ToastTone = "success" | "attention" | "critical"
 
type PulsoToastProps = {
  tone?: ToastTone
  title: string
  description?: string
  actionLabel?: string
  onAction?: () => void
}
 
export function PulsoToast({ tone = "success", title, description, actionLabel, onAction }: PulsoToastProps) {
  return (
    <section
      role="status"
      data-tone={tone}
      className="w-80 rounded-[var(--radius-md)] border border-[var(--border-strong)] bg-[var(--popover)] p-4 shadow-[var(--shadow-lg)] data-[tone=critical]:border-[var(--risk-critical-border)]"
    >
      <h3 className="text-sm font-semibold text-[var(--fg-strong)]">{title}</h3>
      {description ? <p className="mt-1 text-sm text-[var(--fg-muted)]">{description}</p> : null}
      {actionLabel ? (
        <button type="button" onClick={onAction} className="mt-3 text-sm font-medium text-[var(--primary)]">
          {actionLabel}
        </button>
      ) : null}
    </section>
  )
}
<PulsoToast
  title="Filtro salvo"
  description="A visualização foi atualizada para este monitoramento."
  actionLabel="Desfazer"
/>

Regras

  • Toast é curto, não bloqueante e desaparece.
  • Não use toast para confirmação destrutiva; use Alert Dialog.
  • Erros críticos precisam existir também na página ou no log.
  • Se houver ação “Desfazer”, ela deve ser segura e temporalmente clara.
Last updated on
SidebarAccordion