Leadity Komponentenreferenz
Chips, Avatare und Bearbeitungsstatus
Gemeinsamer Vertrag für Metadaten, Status, Verantwortlichkeit und Fortschritt. Statische Informationen bleiben ruhig; nur echte Aktionen erhalten Button- und Popoververhalten.
4966:1241 · 4759:5539 · 5744:15042
Chip-Systematik
Semantik, Form und Verhalten werden unabhängig kombiniert. Dadurch bleibt dieselbe Farbrolle für statische Informationen, Aktionen und Auswahlsets konsistent.
1 · Semantik
Sieben Farbrollen: primary, secondary, secondaryLight, success, error, warning und info.
2 · Form
BaseChip, chip-square, icon-chip und chip-with-tooltip teilen Maße, Typografie und Radius.
3 · Verhalten
Statisch bleibt der Chip ein Textträger. Aktionen verwenden BaseChipButton; exklusive Auswahlsets verwenden ChipSelect.
Semantische Variantenmatrix
Jede Farbrolle ist auf alle Chipformen anwendbar. Die interaktiven Beispiele besitzen Hover, Fokus und eine wirksame Trefferfläche von mindestens 40 × 40 px.
| Semantik | BaseChip | BaseChipButton | chip-square | icon-chip | chip-with-tooltip |
|---|---|---|---|---|---|
primary | Primärstatisch | klickbar | |||
secondary | Sekundärauf Weiß | ||||
secondaryLight | Sekundär hellauf Grau | ||||
success | Erfolgreich | ||||
error | Fehler | ||||
warning | Warnung | ||||
info | Information |
Interaktive Beispiele können ausgelöst werden.
Verhalten und Frontend-Zuordnung
Klickbarkeit ist keine optische Variante, sondern eine eigene Komponentenbasis. Auswahlsets erhalten zusätzlich einen kontrollierten Auswahlzustand.
ChipSelect · exklusive Auswahl
Jährlich ausgewählt.
Der aktive Wert wird mit aria-pressed="true" synchronisiert. Alle Bezeichnungen bleiben Roboto Regular 400.
Komponenten-Mapping
BaseChipStatische Metadaten ohne Fokus oder Hover.
BaseChipButtonEinzelaktion mit Hover, Fokus und zugänglichem Namen.
ChipSelectAuswahlgruppe mit kontrolliertem Selected-State.
Basisschale
32 px, s3-Padding und -Gap, 4 px Radius, Roboto 14/400.
Interaktion
Nur Buttonvarianten besitzen Hover und Fokus; Icon-only-Aktionen erhalten einen Tooltip.
Gruppen
Reine Chipgruppen verwenden horizontal und vertikal s3.
Spezialisierte Chips
Statussegmente, Frist und Iconaktionen übernehmen dieselbe Basisschale.
Zweiteilige Aufgabenstatus
Label und Zahl teilen Fläche und Textfarbe; ausschließlich eine weiße 2‑px-Linie trennt beide.
Icon- und Fristchips
Icon-only-Aktionen halten 40 px effektive Trefferfläche; Fristchips öffnen nur editierbar ein Popover.
Verantwortlichkeitsavatare
40‑px-Avatare für 0, 1, 2 und mehr als 2 Personen; Interaktion liegt auf der gemeinsamen Gruppe.
Nicht interaktive Zustände
Interaktive Verantwortung
MainUser(1/2)
MultiUser(1/3)
ReportingUser(0/4)
Keine Personen gefunden.
Single-Kontext: Eine oder mehrere Personen werden direkt für dieses Element ausgewählt. Die Multiple-Variante bleibt ausschließlich der Sammelbearbeitung mehrerer Elemente vorbehalten.
Bearbeitungsstatus und Progress Bars
Semantische Zählerflächen bleiben unabhängig von allgemeinen Chipregeln erhalten.