Feedback

Komponenten · @repo/ui

Feedback

Statusmeldungen, Banner, Lade- und Leerzustände. Vom kurzen Toast bis zum kollaborativen LockBanner.

AlertStable

@repo/ui/alert

Statusmeldungen in vier Varianten mit optionalem Schließen-Button. Permanent im Inhalt — für kurze Hinweise → Toast.

Vorschau
Konfiguration
React
import { Alert } from "@repo/ui/alert"

<Alert variant="info" title="Hinweis">
  Eine neue Fortbildung ist verfügbar.
</Alert>

InfoBannerStable

@repo/ui/InfoBanner

In-Flow-Benachrichtigung mit Left-Border-Akzent. Vier Varianten + optionaler Titel + optionales Action-Slot. Eigenständig von Alert (Dismissible-Stil) und LockBanner (kollab. Edit-Lock).

Vorschau
Diese Fortbildung umfasst 2 separate Verträge. Du schließt mit jedem Rechtsträger einen eigenen Vertrag ab.
Konfiguration
React
import { InfoBanner } from "@repo/ui/InfoBanner"

<InfoBanner
  variant="info"
>
  Diese Fortbildung umfasst 2 separate Verträge. Du schließt mit jedem Rechtsträger einen eigenen Vertrag ab.
</InfoBanner>
Weitere Beispiele
Alle Varianten im Vergleich
Info
Diese Fortbildung umfasst 2 separate Verträge.
Gespeichert
Deine Änderungen wurden übernommen.

LockBannerStable

@repo/ui/LockBanner

Banner für kollaborative Edit-Locks. Zeigt 'Diese Seite wird gerade bearbeitet von …' an, bietet optional eine Übernahme-Action. Wird im Admin von jedem Editor mit Soft-Lock verwendet.

Wird gerade bearbeitet von Prof. Dr. Mustermann. Du siehst die letzte gespeicherte Version.
Lock wird übernommen…

StatusBadgeStable

@repo/ui/StatusBadge

Mapping-Helfer um Page-Status (draft/published/archived) konsistent als Badge darzustellen. Kapselt die richtige Variante pro Status.

EntwurfVeröffentlichtArchiviert

PageBannerStable

@repo/ui/PageBanner

Voll-bleed Page-Header für Inhalts-Seiten (Calendar, Catalog, Legal). Zentrierter Titel + Subtitle, optional mit Lucide-Icon. i18n-fähig oder mit direkten Strings.

Kalender

Alle Live-Webinare und Hybrid-Events der Akademie.

ConfirmDialog (useConfirm)Stable

@repo/ui/ConfirmDialog

Promise-basierter Bestätigungs-Dialog. Ersetzt window.confirm — i18n-fähig, Fokus-Trap, branded. Provider muss in App-Wurzel hängen.

ProgressBarStable

@repo/ui/ProgressBar

Fortschrittsbalken mit Größen und Farbvarianten.

Vorschau
Kursfortschritt65%
Konfiguration
React
import { ProgressBar } from "@repo/ui/ProgressBar"

<ProgressBar
  value={65}
  label="Kursfortschritt"
  showValue
/>

SkeletonStable

@repo/ui/skeleton

Shimmer-Platzhalter für Ladezustände. Linie / Kreis / Rechteck.

Vorschau
Konfiguration
React
import { Skeleton } from "@repo/ui/skeleton"

<Skeleton variant="line" width={200} height={14} />
Weitere Beispiele
Karten-Platzhalter

EmptyStateStable

@repo/ui/EmptyState

Leerzustand mit Icon, Titel, Beschreibung und optionalen Aktionen.

Vorschau
Keine Ergebnisse
Versuchen Sie einen anderen Suchbegriff.
Konfiguration
React
import { EmptyState } from "@repo/ui/EmptyState"

<EmptyState
  icon={<SearchIcon />}
  title="Keine Ergebnisse"
  description="Versuchen Sie einen anderen Suchbegriff."
  actions={
    <>
      <Button variant="outline" size="sm">Zurücksetzen</Button>
      <Button variant="primary" size="sm">Alle anzeigen</Button>
    </>
  }
/>