Banner

A standing notice about a state: a tint, an icon, the text and actions; errors are toasts.

<div className="flex w-560 max-w-full flex-col gap-12">
      <Banner tone="info" title="New models are available" actions={<Button size="sm">Review</Button>} onDismiss={() => undefined}>
        models.dev added 4 models since the last sync.
      </Banner>
      <Banner tone="warning">This key expires in 5 days.</Banner>
      <Banner tone="danger" title="This organization is scheduled for deletion" actions={<Button size="sm">Restore organization</Button>}>
        Its keys stopped working; on 20 Oct 2026 it is deleted for good.
      </Banner>
      <Banner tone="success">Single sign-on is on for northwind.example.</Banner>
      <Banner>Content logging is off for this project.</Banner>
    </div>

import { Banner } from "@logicplanes/kaeso-ui";

Props

actions
ReactNode
sm pills: on the right, centered on the title and text; under the text when the banner is narrow.
children
ReactNode
The message, with actions if it needs them.
icon
IconSvgElement
An icon in place of the tone's own.
layout
"inline" | "full" = inline
Inside the content (inline) or across the full width of the panel (full).
onDismiss
(() => void)
Only informational banners can be dismissed.
title
ReactNode
The banner's heading.
tone
"neutral" | "success" | "warning" | "danger" | "info" = neutral
The kind of message, from neutral information to a danger warning.