Alert
Componente do shadcn/ui para comunicar estados, avisos e confirmações de forma direta dentro do fluxo da interface.
Variações e estados
O alert é mais sobre contexto e composição do que sobre múltiplas variantes visuais.
Default
Destructive + action
Padrão de implementação
Resumo das classes e snippets principais para usar o alert no projeto.
Root
rounded-lg border p-[30px] text-sm
Estrutura base do container do alert.
Variant
default | destructive
Hoje o componente expõe as variantes `default` e `destructive`.
Action
AlertAction
Permite encaixar uma ação contextual no canto superior direito do bloco.
Alert básico
<Alert>
<InfoIcon />
<AlertTitle>Título do alert</AlertTitle>
<AlertDescription>
Texto de apoio para explicar o contexto.
</AlertDescription>
</Alert>Alert destrutivo
<Alert variant="destructive">
<AlertCircleIcon />
<AlertTitle>Erro ao processar</AlertTitle>
<AlertDescription>
Verifique os dados e tente novamente.
</AlertDescription>
</Alert>Alert com ação
<Alert>
<InfoIcon />
<AlertTitle>Atualização disponível</AlertTitle>
<AlertDescription>
Você pode aplicar a atualização agora.
</AlertDescription>
<AlertAction>
<Button variant="outline" size="sm">Atualizar</Button>
</AlertAction>
</Alert>Props e uso
Pontos principais da API disponível no projeto.
Props principais
variant
"default" | "destructive"
Controla a semântica visual do alerta.
className
string
Permite ajustar layout, radius e composição no contexto de uso.
AlertAction
slot opcional
Adiciona uma ação contextual sem sair do componente.
Acessibilidade
O componente já sai com `role="alert"` no container principal, o que ajuda leitores de tela a identificarem a mensagem.
Use o alert para mensagens importantes, mas evite empilhar vários blocos iguais sem hierarquia clara.
Quando houver ação, garanta que o texto do botão seja direto e coerente com a mensagem apresentada.
MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter