wlkns-dev-standards/design/component_guide.md

COMPONENT_GUIDE.md

Zweck

Dieses Dokument beschreibt die standardisierten UI-Komponenten für Buttons und Forms.

Ziel:

• konsistentes Look & Feel
• vorhersehbare Interaktion
• minimale Variantenvielfalt

---

Buttons

Grundregel

Buttons sind Aktionen, keine Dekoration.

Maximal eine Primary-Action pro View.

---

Button-Typen

Primary

• wichtigste Aktion
• nutzt Akzentfarbe

<button class="button primary">Speichern</button>

Secondary

• alternative Aktionen
• kein visueller Fokus

<button class="button secondary">Abbrechen</button>

Danger

• destruktive Aktionen
• immer bewusst einsetzen

<button class="button danger">Löschen</button>

---

Disabled State

<button class="button primary" disabled>Speichern</button>

Disabled bedeutet: Aktion derzeit nicht möglich – nicht verstecken.

---

Forms

Struktur

<div class="form-group">
  <label>Name</label>
  <input type="text" />
  <div class="hint">Pflichtfeld</div>
</div>

---

Validierung

<div class="form-group form-error">
  <label>Email</label>
  <input type="email" />
  <div class="hint">Ungültige Adresse</div>
</div>

Regeln:

• Fehler sind sichtbar
• keine Farbcodes ohne Text

---

Do / Don’t

Do

• klare Button-Texte
• konsistente Platzierung
• sichtbare Fokus-Zustände

Don’t

• Icons ohne Text
• mehrere Primary-Buttons
• versteckte Fehlermeldungen

---

Erweiterbarkeit

• weitere Komponenten dürfen ergänzt werden
• bestehende Klassen nicht brechen
• Tokens bleiben die Grundlage

---

Status

Version: v1.0 (Baseline)

Dieses Dokument ergänzt DESIGN.md und CSS_GUIDE.md.