Carregando…
Carregando…
Carregando…Inline alert strip with intent variants, optional icon, action and dismiss.
$ npx kikitocn add banner@/lib/utilsimport { Banner } from "@/components/ui/cn/banner/Banner";
export function BannerExample() {
return (
<div className="flex flex-col gap-2">
<Banner intent="info">
Manutenção programada para domingo às 03h.
</Banner>
<Banner intent="success" dismissible>
Cadastro realizado com sucesso!
</Banner>
<Banner intent="warning">
Sua conta expira em 3 dias.
</Banner>
</div>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
intent | 'info' | 'success' | 'warning' | 'danger' | 'neutral' | 'info' | Intenção semântica (define cor e ícone padrão) |
dismissible | boolean | false | Exibe botão × para fechar o banner |
onDismiss | () => void | undefined | Callback chamado ao fechar |
icon | ReactNode | undefined | Ícone customizado (sobrescreve o padrão da intent) |
action | ReactNode | undefined | Conteúdo de ação exibido à direita |
children* | ReactNode | — | Conteúdo principal do banner |