Componentes

Alert

Mensagens inline de status, aviso ou erro na página.

Feedback e estados

Carregando demonstração…

Código da demo
"use client";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { InfoIcon, TriangleAlertIcon } from "lucide-react";

export function Demo() {
  return (
    <div className="flex w-full max-w-lg flex-col gap-fe-3">
      <Alert>
        <InfoIcon aria-hidden />
        <AlertTitle>Informação</AlertTitle>
        <AlertDescription>
          Mensagem inline para contexto ou próximos passos.
        </AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <TriangleAlertIcon aria-hidden />
        <AlertTitle>Erro</AlertTitle>
        <AlertDescription>
          Algo falhou. Revise os campos e tente novamente.
        </AlertDescription>
      </Alert>
    </div>
  );
}

Use

  • Aviso ou erro que fica na página, perto do que afeta.
  • Ícone e texto juntos: nunca só a cor.

Não use

  • Não use para confirmar ação concluída: use Sonner.
  • Não use várias na mesma tela: priorize uma.
Acessibilidade
role=alert; combine título e descrição; ícones decorativos com aria-hidden.
Importar
import { Alert, AlertTitle, AlertDescription } from "@financeequity/ui/alert"

Neste repositório:

import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"