UI-Kit
Diese Übersicht ist der Master für alle Komponenten. Änderungen werden hier gepflegt und in die Detailseiten (Sidebar) übernommen. Akzentfarbe und Hell/Dunkel oben rechts umschaltbar.
Buttons
Alle Varianten und Zustände. Fokus per Tab-Taste sichtbar, deaktivierte Buttons ausgegraut.
Formulare
Feld mit Label und Hinweis, Fehlerzustand nicht nur farblich (Icon + Text), Datumsfeld, Textarea, Checkbox, Switch, Dropdown.
Erscheint auf der Rechnung.
Checkbox & Switch
Automatische Freigabe
Nur bei unveränderten Positionen.
Dropdown
Toolbar & Filter
Tabs & Subnav
Inhalt des aktiven Subnav-Eintrags.
Datentabelle
Zwei Ausprägungen: die klassische Tabelle (in einer Card, sortierbar, fixierbare Kopfzeile) und die schwebende Tabelle, die ohne Rahmen ruhig auf dem Hintergrund liegt und erst beim Hover als Kachel abhebt.
Klassisch (in Card)
| Rechnung | Kunde | Status | Fällig | Betrag |
|---|---|---|---|---|
| RE-10428 | PixelCraft Services | Bezahlt | 01.09.2026 | CHF1'240.00 |
| RE-10429 | Atrium GmbH | Offen | 14.09.2026 | CHF480.00 |
| RE-10430 | Redbench AG | Überfällig | 20.08.2026 | CHF2'090.00 |
| Summe offen | CHF2'570.00 | |||
Schwebend (ohne Card, ohne Rahmen)
Kunde
Betrag
PixelCraft Services1042 · RE-10428
CHF1'240.00
Atrium GmbH1043 · RE-10429
CHF480.00
Redbench AG1044 · RE-10430
CHF2'090.00
1–3 von 128
…
Beschreibungsliste
- Kundennummer
- 1042
- Sprache
- Deutsch
- Währung
- CHF
- Zahlungsziel
- 14 Tage
Badges & Status
Auf Basis des verallgemeinerten Zustandsvokabulars: neutral · active · success · waiting · critical.
Neutral
Aktiv
Erfolg
Wartet
Kritisch
Entwurf
Aktiv
Bezahlt
Offen
Überfällig
Rolle
Admin
Hinweis: Verträge starten stets am Monatsersten.
Zahlung erfolgreich zugeordnet.
Diese Adresse hat keinen QR-tauglichen Eintrag.
Der Verrechnungslauf ist fehlgeschlagen.
Empty State
Noch keine Rechnungen
Sobald der erste Verrechnungslauf gelaufen ist, erscheinen die Rechnungen hier.
Overlays
Modal und Drawer fangen den Fokus, schliessen mit Escape und geben den Fokus zurück. Toast erscheint unten.