Buttons
Zwei Varianten – Primary für Hauptaktionen, Outline für sekundäre – mit konsistenter Mono-Typografie
Primary Button
PRIMARY · bg ce-zinc-950 → hover ce-zinc-800 · text white · Pressura Mono 15px/500 · radius 8px
DEFAULT (px-5 py-2.5) + SMALL (px-3 py-1.5) + COMPACT (px-2.5 py-1 text-12px)
Outline Button
OUTLINE · border 1px ce-zinc-400 → hover ce-zinc-600 · text ce-zinc-600 → hover ce-zinc-800 · Pressura Mono 15px/500 · radius 8px
DEFAULT (px-5 py-2.5) + SMALL (px-3 py-1.5) + COMPACT (px-2.5 py-1 text-12px)
Icon Buttons
Leading Icon + Trailing Icon · Icon 16x16px (w-4 h-4) · gap-2
PRIMARY
OUTLINE
States Demo
Alle Zustaende als interaktive Buttons -- Hover und Focus live erlebbar
PRIMARY STATES
OUTLINE STATES
Spezifikationen
| Variante | Font | Background | Text | Border | Radius | Padding |
|---|---|---|---|---|---|---|
| Primary | Pressura Mono 15px/500 | ce-zinc-950 → hover ce-zinc-800 | white | — | 8px | 10px 20px |
| Primary (small) | Pressura Mono 15px/500 | ce-zinc-950 → hover ce-zinc-800 | white | — | 8px | 6px 12px |
| Outline | Pressura Mono 15px/500 | transparent | ce-zinc-600 → hover ce-zinc-800 | 1px ce-zinc-400 → hover ce-zinc-600 | 8px | 10px 20px |
| Outline (small) | Pressura Mono 15px/500 | transparent | ce-zinc-600 → hover ce-zinc-800 | 1px ce-zinc-400 → hover ce-zinc-600 | 8px | 6px 12px |
| Icon Button | Pressura Mono 15px/500 | wie Variante | wie Variante | wie Variante | 8px | wie Variante + gap-2 |
| State | Verhalten |
|---|---|
| Hover | Primary: bg → ce-zinc-800 | Outline: border → ce-zinc-600, text → ce-zinc-800 |
| Focus | outline 2px solid ce-zinc-950, offset 2px |
| Active | transform scale(0.98) |
| Disabled | Primary: bg surface-muted, text text-muted | Outline: border border-muted, text text-muted — cursor not-allowed, keine Hover-Aenderung |
| Icon | Spezifikation |
|---|---|
| Groesse | 16x16px (w-4 h-4) |
| Abstand | gap-2 (8px) zwischen Icon und Text |
| Farbe | currentColor (erbt Textfarbe) |
| Position | Leading (vor Text) oder Trailing (nach Text) |
Agent-Checkliste
Alle Werte aus Spezifikationstabelle uebernommen
Responsive Breakpoints implementiert (mobile / md / xl)
Hover/Focus/Active/Disabled States implementiert
Dark Mode getestet (Token-Swap funktioniert)
Konsistenz mit Guidelines geprueft (Font-Zuordnung, Spacing-Grid, Farb-Tokens)
Keine verbotenen Patterns (Card-in-Card, eigene Shadows, Nicht-Grid-Spacing)