Carregando…
Carregando…
Carregando…Block alert with 5 intents, 4 variants (soft/outline/solid/left-accent), title, icon and dismiss.
$ npx kikitocn add alert@/lib/utilsimport { Alert } from "@/components/ui/cn/alert/Alert";
export function AlertExample() {
return (
<div className="flex flex-col gap-3 max-w-lg">
<Alert intent="info" title="Informação">
Sua sessão expira em 30 minutos.
</Alert>
<Alert intent="success" title="Sucesso" dismissible>
Dados salvos com sucesso!
</Alert>
<Alert intent="danger" title="Erro">
Não foi possível completar a operação.
</Alert>
</div>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
intent | 'info' | 'success' | 'warning' | 'danger' | 'neutral' | 'info' | Intenção semântica |
variant | 'soft' | 'outline' | 'solid' | 'left-accent' | 'soft' | Estilo visual do alert |
title | string | undefined | Título em negrito |
icon | ReactNode | undefined | Ícone customizado (sobrescreve o padrão) |
showIcon | boolean | true | Exibe ou oculta o ícone de intent |
dismissible | boolean | false | Exibe botão × para fechar |
onDismiss | () => void | undefined | Callback ao fechar |
actions | ReactNode | undefined | Área de ações abaixo do conteúdo |
size | 'sm' | 'md' | 'lg' | 'md' | Tamanho do alert |
children | ReactNode | undefined | Conteúdo principal do alert |
All intents (soft)
Info
Success
Warning
Danger
Neutral
soft · outline · solid · left-accent
Soft
Outline
Solid
Left Accent
Dismissible · with action
Action required