# 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

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

#### Secondary
- alternative Aktionen
- kein visueller Fokus

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

#### Danger
- destruktive Aktionen
- immer bewusst einsetzen

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

---

### Disabled State

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

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

---

## Forms

### Struktur

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

---

### Validierung

```html
<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`.