Alert

Core Idea

Callout estático para chamar atenção do usuário (não é toast, não some sozinho; fica fixo no layout). Não usa Base UI (é um componente puramente visual, sem primitiva JS por trás).

Key Concepts

• Alert: container; variant = "default" | "destructive".
• AlertTitle / AlertDescription: título e corpo, filhos diretos de Alert (junto com o ícone, sem wrapper de header como em Dialog/Card).
• AlertAction: elemento de ação (ex. Button) posicionado absolutamente no canto superior direito do alert.
• Ícone (lucide-react) é passado como primeiro filho direto de Alert, sem componente wrapper dedicado — o CSS do Alert já posiciona automaticamente.

Code Examples

<Alert variant="destructive" className="max-w-md">
  <AlertCircleIcon />
  <AlertTitle>Payment failed</AlertTitle>
  <AlertDescription>
    Your payment could not be processed. Please check your payment method and try again.
  </AlertDescription>
</Alert>

• O que demonstra: alert destrutivo com ícone, título e descrição, sem wrapper adicional.

<Alert className="max-w-md">
  <AlertTitle>Dark mode is now available</AlertTitle>
  <AlertDescription>Enable it under your profile settings to get started.</AlertDescription>
  <AlertAction>
    <Button size="xs" variant="default">Enable</Button>
  </AlertAction>
</Alert>

• O que demonstra: AlertAction adicionando um botão de ação posicionado no canto superior direito.

<Alert className="max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50">
  <AlertTriangleIcon />
  <AlertTitle>Your subscription will expire in 3 days.</AlertTitle>
  <AlertDescription>Renew now to avoid service interruption.</AlertDescription>
</Alert>

• O que demonstra: cor customizada (amber/warning) via classes Tailwind diretas no Alert, já que só existem as variantes default/destructive nativamente.

Reference Tables

Composição:

Alert
├── Icon
├── AlertTitle
├── AlertDescription
└── AlertAction

Componente	Prop	Type	Default
Alert	variant	"default" | "destructive"	"default"
AlertTitle	className	string	-
AlertDescription	className	string	-
AlertAction	className	string	-

Anti-patterns

• Usar Alert para mensagem temporária/flutuante: isso é o papel do Sonner/toast, não do Alert (que é estático e fica no fluxo do layout).

Key Takeaways

1. Só existem duas variantes nativas (default, destructive); para outras cores (warning/amber, info/blue), aplicar classes Tailwind diretamente via className.
2. O ícone não tem componente wrapper dedicado, é filho direto de Alert junto com AlertTitle/AlertDescription.
3. AlertAction posiciona a ação absolutamente no canto superior direito — não precisa de flex/justify manual.
4. Alert não depende de Base UI nem de JS de runtime; é puramente estrutura+CSS.
5. Instalação não requer nenhuma dependência extra além do próprio componente.

Connects To

• Alert Dialog: para interromper o usuário e exigir resposta, use Alert Dialog; Alert é passivo (não bloqueia nada).
• Sonner (toast): para notificações temporárias que desaparecem sozinhas, não use Alert.