Alert
Componente para exibir mensagens de feedback, avisos e informações contextuais.
import { Alert, AlertTitle, AlertDescription } from "@workspace/ui/components/alert";
<Alert>
<AlertTitle>Título</AlertTitle>
<AlertDescription>Descrição da mensagem.</AlertDescription>
</Alert>Default
Alerta padrão para informações gerais.
Informação
Seu pedido está sendo processado e será enviado em breve.
Destructive
Alerta para erros e ações destrutivas.
Erro
Não foi possível processar o pagamento. Tente novamente.
Com ícone
Passe um SVG como primeiro filho para ativar o layout com ícone.
Informação
Seu pedido está sendo processado e será enviado em breve.
Pagamento confirmado
O pagamento foi aprovado com sucesso.
Erro no pagamento
Não foi possível processar o pagamento. Tente novamente.
import { HugeiconsIcon } from "@hugeicons/react";
import { InformationCircleIcon } from "@hugeicons/core-free-icons";
import { Alert, AlertTitle, AlertDescription } from "@workspace/ui/components/alert";
<Alert>
<HugeiconsIcon icon={InformationCircleIcon} size={16} color="currentColor" strokeWidth={1.5} />
<AlertTitle>Informação</AlertTitle>
<AlertDescription>Descrição da mensagem.</AlertDescription>
</Alert>Cores Semânticas
Alertas com tokens semânticos. Usando opacity modifiers (bg-success/10) o dark mode funciona automaticamente.
Sucesso
Pagamento confirmado com sucesso!
Aviso
Estoque baixo para este produto.
Dica
Adicione mais produtos para frete grátis.
API Reference
| Prop | Type | Default | Descrição |
|---|---|---|---|
variant | 'default' | 'destructive' | 'default' | Estilo visual do alerta |
AlertTitle | ReactNode | — | Título em destaque do alerta |
AlertDescription | ReactNode | — | Texto descritivo da mensagem |