Design Component Lab
Links: Proton/Signal #00D4D4 | Rechts: Apple #007AFF
1 — Primary Button
SpeichernAbbrechenGhostLöschen
4
SpeichernAbbrechenKompakt
2 — Text Input
3
3 — Card
Projekt
Beispielkarte mit Titel und Beschreibung.
1
Projekt
Beispielkarte mit Titel und Beschreibung.
4 — Badge / Tag
NeuAktivWarnungFehler
4
NeuAktivWarnungFehler
5 — Navigation Tabs
ProfilEinstellungenSicherheit
1
ProfilEinstellungenSicherheit
6 — Toggle Switch
Benachrichtigungen
Push
2
Benachrichtigungen
Dark Mode
7 — Alert
✓Vorgang erfolgreich
!Speicher fast voll
2
✓ Vorgang erfolgreich
! Speicher fast voll
8 — Avatar
JD
MK
2
JD
MK
9 — Progress Bar
Upload
1
Upload
10 — Search Bar
1
11 — Select / Dropdown
1
12 — List Item
📁Dokumente→
⚙️→
Einstellungen
App-Konfiguration
2
📁Dokumente›
⚙️›
Einstellungen
App-Konfiguration
13 — Stat / Metric
12.458
Nutzer
458
Aktiv
2
12.458
Nutzer
458
Aktiv
14 — Chip / Tag
ReactTypeScript
2
ReactTypeScript
15 — Step Indicator
✓
Anmeldung
2
Profil
3
Fertig
1
Anmeldung
Profil
Fertig
16 — Radio Button
2
17 — Divider
ODER
1
ODER
18 — Text Link
Passwort vergessen?
1
Passwort vergessen?
19 — Icon Button
★
1
★
20 — Table
| Name | Status |
|---|---|
| Lukas M. | Aktiv |
| Sarah K. | Neu |
2
| Name | Status |
|---|---|
| Lukas M. | Aktiv |
| Sarah K. | Neu |
21 — Auto-Contrast (Go-Funktion)
Alle Badges nutzen
textColorForBg(hex):#00D4D4 #34C759 #FF9500 #FF3B30 #007AFF #5856D6 #FF2D55 #000000
8
Selbe Funktion, andere Farben:
#FFFFFF #F5F5F7 #FFD60A #FF9F0A #64D2FF #30D158 #E5E5EA #1C1C1E
22 — Modal / Sheet
Löschen bestätigen
Diese Aktion kann nicht rückgängig gemacht werden.
AbbrechenLöschen
1
Löschen bestätigen
Diese Aktion kann nicht rückgängig gemacht werden.
AbbrechenLöschen
23 — Toast / Notification
✓ Nachricht gesendet
! Keine Internetverbindung
✗ Fehler beim Speichern
3
✓ Nachricht gesendet
! Keine Internetverbindung
✗ Fehler beim Speichern
24 — Checkbox
3
25 — Empty State
📂
Keine Projekte
Erstelle dein erstes Projekt um loszulegen.
1
📂
Keine Projekte
Erstelle dein erstes Projekt um loszulegen.
26 — Skeleton Loader
1
27 — Dropdown Menu
Option wählen ▼
Profil bearbeiten
Einstellungen
Abmelden
1
Option wählen ▼
Profil bearbeiten
Einstellungen
Abmelden
28 — Segmented Control (Icon)
🏠🔔⚙️👤
1
🏠🔔⚙️👤
29 — Button Group (Aktionen)
AntwortenAllen antwortenWeiterleiten
1
AntwortenAllen antwortenWeiterleiten
30 — User Card (Hover Preview)
LK
Lukas K.
@lukas · 1.2k Follower
Full-Stack Developer mit Fokus auf Rust und Distributed Systems.
+ Folgen
1
LK
Lukas K.
@lukas · 1.2k Follower
Full-Stack Developer mit Fokus auf Rust und Distributed Systems.
+ Folgen
31 — Subscribe / Send Button
+ FolgenFolge ichSenden
3
+ FolgenFolge ichSenden
32 — Info Card (KPI)
📊
Umsatz
€12.458
▲ +8.2%
1
📊
Umsatz
€12.458
▲ +8.2%
33 — Buy / Sell Widget
Buy
€24,50
Sell
€24,48
1
Buy
€24,50
Sell
€24,48
34 — Leverage Selector
1x2x3x5x10x
1
1x2x3x5x10x
35 — Order Book
| Preis | Menge | Summe |
|---|---|---|
| 24,50 | 1.234 | 30.233 |
| 24,48 | 856 | 20.955 |
| 24,45 | 2.100 | 51.345 |
1
| Preis | Menge | Summe |
|---|---|---|
| 24,50 | 1.234 | 30.233 |
| 24,48 | 856 | 20.955 |
| 24,45 | 2.100 | 51.345 |
36 — Order History
BTC/USDT+€124,50vor 2h
ETH/USDT-€56,20vor 5h
2
BTC/USDT
vor 2h
+€124,50
ETH/USDT
vor 5h
-€56,20
37 — News Feed
Finanzen
BTC erreicht neues Allzeithoch bei €78.000
vor 15 Minuten
Technologie
Apple kündigt neues KI-Framework an
vor 1 Stunde
2
Finanzen
BTC erreicht neues Allzeithoch bei €78.000
vor 15 Minuten
Technologie
Apple kündigt neues KI-Framework an
vor 1 Stunde
38 — Fundamental Metrics
KGV
28,4
-2,1%
EPS
€6,42
+12,3%
Marktkap.
€2,8B
+4,7%
Div.-Rendite
1,8%
+0,2%
4
KGV
28,4
-2,1%
EPS
€6,42
+12,3%
Marktkap.
€2,8B
+4,7%
Div.-Rendite
1,8%
+0,2%
39 — Login / Register Form
Willkommen zurück
Melde dich mit deinem Konto an.
AnmeldenPasswort vergessen?1
Willkommen zurück
Melde dich mit deinem Konto an.
AnmeldenPasswort vergessen?40 — Tooltip / Popover
Hover meDas ist ein Tooltip
1
Hover meDas ist ein Tooltip
41 — Calendar / Date Picker
◀Juli 2026▶
MODIMIDOFRSASO
12345678910111213141516171819202122232425262728293031
1
◀Juli 2026▶
MODIMIDOFRSASO
12345678910111213141516171819202122232425262728293031
42 — Slider / Range
050100
1
050100
43 — Accordion
Allgemein ▼
Hier stehen die allgemeinen Einstellungen und Konfigurationen.
Sicherheit ▲
Ändere dein Passwort und aktiviere 2FA für mehr Sicherheit.
2
Allgemein ▼
Hier stehen die allgemeinen Einstellungen und Konfigurationen.
Sicherheit ▲
Ändere dein Passwort und aktiviere 2FA für mehr Sicherheit.
44 — Progress Spinner
3
45 — Pagination
◀12345▶
1
◀12345▶
46 — Action Sheet / Bottom Sheet
📷 Foto aufnehmen
🖼️ Aus Galerie wählen
Abbrechen
1
📷 Foto aufnehmen
🖼️ Aus Galerie wählen
Abbrechen
47 — Combobox / Autocomplete
Häufig gesucht
🇩🇪 Deutschland
🇦🇹 Österreich
🇨🇭 Schweiz
1
🇩🇪 Deutschland
🇦🇹 Österreich
🇨🇭 Schweiz
48 — OTP / Code Input
1
49 — Quantity Stepper
−3+
1
−3+
50 — File Upload / Drop Zone
📄
Datei hier ablegen
oder klicken zum Durchsuchen1
📄
Datei hier ablegen
oder klicken zum Durchsuchen51 — Timeline / Activity Feed
Projekt erstellt
Lukas hat ein neues Projekt angelegt
vor 5 Minuten
Datei hochgeladen
design-v2.pdf wurde hinzugefügt
vor 2 Stunden
Kommentar hinterlassen
Sarah hat Feedback zur UI gegeben
vor 1 Tag
3
Projekt erstellt
Lukas hat ein neues Projekt angelegt
vor 5 Minuten
Datei hochgeladen
design-v2.pdf wurde hinzugefügt
vor 2 Stunden
Kommentar hinterlassen
Sarah hat Feedback zur UI gegeben
vor 1 Tag
52 — Data Table (Sortable)
| Name | Rolle | Status |
|---|---|---|
| Lukas M. | Admin | Aktiv |
| Sarah K. | Editor | Neu |
| Tom B. | Viewer | Inaktiv |
3
| Name | Rolle | Status |
|---|---|---|
| Lukas M. | Admin | Aktiv |
| Sarah K. | Editor | Neu |
| Tom B. | Viewer | Inaktiv |
53 — Pricing Card
Free
€0/mo
Basis-Funktionen
AktuellPro
€9/mo
Alle Premium-Features
Upgrade1
Free
€0/mo
Basis-Funktionen
AktuellPro
€9/mo
Alle Premium-Features
Upgrade54 — Progress Ring / Circle
70%
1
70%
55 — Breadcrumb
Dashboard/Projekte/Design
1
Dashboard›Projekte›Design
56 — FAB / Speed Dial
✏️📷+
1
✏️📷+
57 — Sidebar / Navigation Drawer
🏠Dashboard
📁Projekte
👥Team
⚙️Einstellungen
4
🏠Dashboard
📁Projekte
👥Team
⚙️Einstellungen
58 — Notification Badge
🔔3
💬12
2
🔔3
💬12
59 — Banner / Hero
1
60 — Loading Button
SpeichernSpeichern
2
SpeichernSpeichern
61 — Keyboard Shortcut Hint
⌘+KBefehlspalette
⌘+SSpeichern
2
⌘+KBefehlspalette
⌘+SSpeichern
62 — Restaurant Sidebar (Map Results)
Restaurant
3kmBewertung ▾Küche ▾Offen jetzt
La Pergola
★★★★☆ 4,2 · Italienisch
0,8km · €€ · Geöffnet
Green Garden
★★★★★ 4,5 · Vegan
1,2km · €€ · Geöffnet
Umami Soul
★★★★☆ 4,0 · Asiatisch
2,1km · € · Geschlossen
3
Restaurant
3kmBewertung ▾Küche ▾Offen jetzt
La Pergola
★★★★☆ 4,2 · Italienisch
0,8km · €€ · Geöffnet
Green Garden
★★★★★ 4,5 · Vegan
1,2km · €€ · Geöffnet
Umami Soul
★★★★☆ 4,0 · Asiatisch
2,1km · € · Geschlossen