Banner (Ankündigungsleiste) — UI-Kit-Galerie

Beispiele

Ankündigung (accent, mit Link + schließbar)

Warnung (nicht schließbar)

Neutral ohne Icon

Unsicherer Link → nur Text

Eigenschaften

Prop	Typ	Default	Builder-Label
text *	string	—	Text
tone	string: accent \| neutral \| info \| success \| warning \| danger	"accent"	Ton
linkText	string	""	Link-Text
linkHref	string	""	Link-Ziel
dismissible	boolean	true	Schließbar (✕)
storageKey	string	""	Merk-Schlüssel
icon	string	"megaphone"	Icon (leer = keins)

* Pflicht-Prop

Events & Slots

Events: ⚡ dismiss — im Surface per on: {<event>: {action, params}} verdrahtbar.

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
`--banner-bg`	`var(--color-action-primary)`
`--banner-fg`	`var(--color-text-inverse)`
`--banner-padding-y`	`var(--size-2)`

Genutzte Design-Tokens

color.action.primarycolor.status.dangercolor.status.danger-surfacecolor.status.infocolor.status.info-surfacecolor.status.successcolor.status.success-surfacecolor.status.warningcolor.status.warning-surfacecolor.surface.sunkencolor.text.defaultcolor.text.inversefont.family.defaultradius.smsize.2size.3size.4size.6text.smweight.semibold

LLM-Notizen

component.banner

Seitenbreite Ankündigungsleiste (oben auf der Seite): Text, optionaler Link, Ton-Varianten, Schließen-Knopf. Mit storageKey bleibt sie nach dem Schließen für die Sitzung zu (sessionStorage — bewusst nicht dauerhaft).

Wann nutzen

Release-Hinweise, Wartungsfenster, Aktionen — EINE Zeile über allem. Für Hinweise IM Inhalt component.alert, für Bestätigungen action.toast.

Wichtige Props

text (Pflicht), tone (accent|neutral|info|success|warning|danger), linkText+linkHref (safe_href), dismissible, storageKey, icon (leer = keins).
Stellschrauben: --banner-bg, --banner-fg, --banner-padding-y.

Beispiel-Node


{
  "definition": "component.banner",
  "props": { "text": "Sommeraktion bis 31.08.", "linkText": "Zu den Angeboten", "linkHref": "/shop", "storageKey": "sommeraktion" }
}