Badge

const Badge: React.FC<BadgeProps>

Farbiger Status-Badge.

Zeigt entweder einen Wert aus einem Objekt (Pfad-Modus: JSON-Pfad in value + dataSource) oder — ohne dataSource — den in value übergebenen Text direkt an (Literal-Modus). Über BadgeConfig lassen sich pro Wert Label und Farben setzen.

Vorschau

Eine Vorschau, mehrere Konfigurationen: die ersten drei Badges laufen im Literal-Modus (ohne dataSource), die beiden letzten im Pfad-Modus — dort steckt der Wert im Objekt und wird ohne echten Query-Hook per staticSource bereitgestellt.

Vorschau

Neu

Erledigt

Offen

Offen

Erledigt

Code

import { Badge, staticSource } from '@gentics/cockpit/widgets';

const statusConfig = {
  open: { label: 'Offen', color: '#137DFF' },
  done: { label: 'Erledigt', color: '#1A7F37' },
};

// Literal-Modus: `value` ist der anzuzeigende Text.
<Badge value="Neu" config={{ Neu: '#137DFF' }} />
<Badge value="Erledigt" config={{ Erledigt: '#1A7F37' }} />
<Badge value="Offen" />

// Pfad-Modus: `value` ist ein JSON-Pfad in das Query-Ergebnis.
// Im echten Sachbearbeiter-Cockpit statt staticSource den Query-Hook nutzen:
//   dataSource={() => useFile(id)}
<Badge value="status" dataSource={staticSource({ status: 'open' })} config={statusConfig} />
<Badge value="status" dataSource={staticSource({ status: 'done' })} config={statusConfig} />

Im Sachbearbeiter-Cockpit verwenden

Der Pfad-Modus nimmt dieselbe Datenquelle wie die übrigen Widgets der Detailansicht — siehe Datenquellen. In einer List genügt type: 'badge' plus badgeConfig in der Spaltenkonfiguration.

Der Badge hat keine className-Prop: die Optik kommt ausschließlich aus config, der Zuordnung vom aufgelösten Wert zu Label und Farben.

Fall	Textfarbe	Hintergrund
Wert steht nicht in config	#1A1A1A	#F0F0F0
Kurzform '#137DFF'	der Wert selbst	daraus abgeleitet: #137DFF12, also ~7 % Deckkraft
{ color, background }	color	background
{ color } ohne Hex-6 ('red', rgb(…))	color	#F0F0F0 — abgeleitet wird nur aus 6-stelligem Hex

label überschreibt den angezeigten Text, sonst steht dort der aufgelöste Wert.

Props

Props für das Badge Component.

Properties

config?

optional config?: BadgeConfig

Optische Zuordnung pro Wert (Farbe/Label).

---

dataSource?

optional dataSource?: () => UseQueryResult<JsonObject, Error>

Datenquelle als Query-Funktion. Wird beim Rendern aufgerufen; der Badge liest den Wert per value-Pfad aus query.data und zeigt während isPending/isPlaceholderData ein Skeleton.

Liegt bereits ein statisches Objekt vor (kein echter Query-Hook), mit staticSource umwickeln: dataSource={staticSource(obj)}.

Wird die Prop gar nicht übergeben, arbeitet der Badge im Literal-Modus und zeigt value unverändert an.

Returns

UseQueryResult<JsonObject, Error>

---

value

value: string

Ist dataSource gesetzt, wird value als JSON-Pfad in das Query-Ergebnis gelesen (z.B. "status" oder "user.role"). Ohne dataSource ist value der direkt anzuzeigende Text — der Badge funktioniert damit für beliebige Werte, nicht nur für Objekte/Files.

Typen

BadgeConfig

BadgeConfig = Record<string, BadgeConfigEntry>

Zuordnung Wert → Darstellung. Schlüssel ist der aufgelöste Badge-Wert.

Schlüssel ist der aufgelöste Wert: im Pfad-Modus also das, was am jsonPath steht, im Literal-Modus der Text aus value. Ein Wert ohne passenden Schlüssel bleibt grau — die Config muss also nicht vollständig sein.

import { Badge } from '@gentics/cockpit/widgets';
import type { BadgeConfig } from '@gentics/cockpit/widgets';

const aktenStatus: BadgeConfig = {
  Work: '#137DFF',
  Closed: { label: 'Abgeschlossen', color: '#1A7F37' },
  Rejected: { label: 'Abgelehnt', color: '#B91C1C', background: '#FEF2F2' },
};

<Badge value="fileHandlingState" dataSource={useAkte} config={aktenStatus} />

Dasselbe Objekt passt in eine Spalte der List — dort heißt die Prop badgeConfig:

const columns = [
  { path: 'fileHandlingState', label: 'Status', width: 1,
    type: 'badge', badgeConfig: aktenStatus },
];

BadgeConfigEntry

type BadgeConfigEntry =
  | string                                                   // Kurzform: die Textfarbe
  | { label?: string; color?: string; background?: string }; // ausführlich

label überschreibt den angezeigten Text, color die Textfarbe, background den Hintergrund. Was ohne Angabe passiert, steht in der Tabelle unter Im Sachbearbeiter-Cockpit verwenden.