Version: latest

Universell einsetzbar

Chip funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/chip) — die Library erkennt die Umgebung automatisch.

Chip

Chip rendert ein kompaktes Inline-Label. Häufige Einsatzzwecke sind Tags, Status-Badges, Filter-Pills und ausgewählte Werte in Formular-Komponenten.

Übersicht

import { Chip } from '@prokodo/ui/chip'

<Chip label="Published" color="success" variant="outlined" />
<Chip label="Draft" color="warning" onDelete={() => handleDelete()} />

Live PreviewOpen in Storybook ↗

Import

import { Chip } from "@prokodo/ui/chip"

CSS:

import "@prokodo/ui/chip.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`label`	`ReactNode`	—	✅	Chip-Beschriftung (Text oder React-Node).
`variant`	`"filled" \| "outlined"`	`"filled"`	—	Visuelle Variante.
`color`	`Variants`	`"primary"`	—	Farbakzent.
`icon`	`ReactNode`	—	—	Icon-Element im Chip.
`onDelete`	`(e: MouseEvent<HTMLButtonElement>) => void`	—	—	Löschen-Button-Handler; zeigt Löschen-Icon an.
`onClick`	`(e: MouseEvent<HTMLDivElement>) => void`	—	—	Klick-Handler (macht Chip interaktiv).
`onKeyDown`	`(e: KeyboardEvent<HTMLDivElement>) => void`	—	—	Tastatur-Handler am Chip-Container.
`className`	`string`	—	—	CSS-Klasse am Root-Element.

Siehe src/components/chip/Chip.model.ts für den vollständigen ChipProps-Typ.

Design-Tokens

Passe Chip über CSS Custom Properties auf :root oder einem übergeordneten Element an.

Token	Standard	Beschreibung
`--pk-chip-radius`	`var(--pk-radius-pill)`	Eckenradius des Chips
`--pk-chip-bg`	`inherit`	Ruhezustand-Hintergrundfarbe
`--pk-chip-fg`	`var(--pk-color-fg)`	Ruhezustand-Textfarbe (adaptiv — weiß im Dark Mode)
`--pk-space-xs`	—	Vertikales Padding
`--pk-space-sm`	—	Abstand zwischen Label und Icon
`--pk-space-md`	—	Horizontales Padding
`--pk-color-border`	—	Rahmen im neutralen Outlined-Zustand
`--pk-timing-normal`	—	Übergangsdauer für Farbe und Schatten
`--pk-color-surface-raised`	—	Hintergrund des Löschen-Buttons

Dark Mode: Die Basis-Textfarbe ist jetzt var(--pk-color-fg), sodass color="inherit"-Chips auf hellen und dunklen Flächen lesbar sind.
Klickbare Chips (onClick / onKeyDown) erhalten einen farbigen Umgebungsschatten passend zum color-Prop; der Schatten blendet beim Hover aus — analog zum Button-Schatten-Pattern.

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
1.4.1	Verwendung von Farbe (A)	🔍 Manuell prüfen	Farbe darf nicht das einzige Mittel zur Informationsvermittlung sein (z. B. Fehlerhinweise, Pflichtfeldmarkierungen).
2.1.1	Tastatur (A)	✅ Erfüllt	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.4.7	Fokus sichtbar (AA)	🔍 Manuell prüfen	Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich.
2.5.8	Zielgröße (Minimum) (AA)	🔍 Manuell prüfen	Interaktive Zielbereiche müssen mindestens 24 × 24 CSS-Pixel groß sein. Prüfung in der integrierten Produkt-UI erforderlich.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 3 jest-axe-Assertion(s) in 4 Testdatei(en) · 1 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Chip in Storybook öffnen

Quellcode

src/components/chip/Chip.model.ts