Banner

Ein bleibender Hinweis auf einen Zustand: eine Tönung, ein Symbol, der Text und Aktionen; Fehler sind 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
Kleine Pills: rechts, mittig zu Titel und Text; unter dem Text, wenn das Banner schmal ist.
children
ReactNode
Die Nachricht, bei Bedarf mit Aktionen.
icon
IconSvgElement
Ein Symbol anstelle des Symbols des Tons.
layout
"inline" | "full" = inline
Im Inhalt (inline) oder über die volle Breite des Panels (full).
onDismiss
(() => void)
Nur Info-Banner lassen sich schließen.
title
ReactNode
Die Überschrift des Banners.
tone
"neutral" | "success" | "warning" | "danger" | "info" = neutral
Die Art der Nachricht, von neutraler Information bis zur Warnung vor einer Gefahr.