# Komponentenspezifikation · Vorlage

Kopieren Sie diese Datei, benennen Sie sie nach der Komponente und füllen Sie jeden Abschnitt aus. Löschen Sie die Beispiele in eckigen Klammern. Trifft ein Abschnitt nicht zu, schreiben Sie „Nicht zutreffend“, statt ihn zu entfernen: So ist sichtbar, dass er bedacht wurde.

---

## Identität

- **Name:** [Button]
- **Version der Spezifikation:** [1.0.0]
- **Status:** [Entwurf | freigegeben | veraltet]
- **Verantwortlich:** [Person oder Team, das Änderungen freigibt]
- **Komponente in Figma:** [genauer Name und Link zur Bibliothek]
- **Komponente im Code:** [Pfad oder Paket, z. B. `@firma/ui/Button`]

## Zweck

- **Dient dazu:** [eine Aktion in der aktuellen Ansicht auszulösen]
- **Dient nicht dazu:** [zu einer anderen Seite zu navigieren: dafür gibt es Link]

## Eigenschaften

| Eigenschaft | Erlaubte Werte | Standard | Pflicht | Hinweise |
|---|---|---|---|---|
| [variant] | [primary, secondary, ghost] | [secondary] | [nein] | [nur ein primary pro Ansicht] |
| [size] | [s, m, l] | [m] | [nein] | |
| [disabled] | [true, false] | [false] | [nein] | |

## Inhalt und Slots

| Slot | Was er aufnimmt | Grenzen | Bei Überschreitung |
|---|---|---|---|
| [label] | [Text] | [1–24 Zeichen] | [wird nie gekürzt: der Text wird überarbeitet] |
| [icon] | [Icon aus dem System] | [optional, eines] | |

## Zustände

| Zustand | Wann er eintritt | Was sich ändert |
|---|---|---|
| [Ruhe] | | |
| [Hover / Fokus] | | |
| [Laden] | [Aktion läuft] | [gesperrt, zeigt Indikator, behält die Breite] |
| [deaktiviert] | | |
| [Fehler] | | |

## Verwendete Tokens

| Entscheidung | Token | Figma-Variable |
|---|---|---|
| [Hintergrund, primary] | [color.action.primary] | [action/primary] |
| [horizontaler Abstand] | [space.4] | [space/4] |
| [Radius] | [radius.m] | [radius/m] |

Regel: Kein visueller Wert der Komponente wird von Hand geschrieben. Fehlt ein Token, wird das Token vorgeschlagen; ein loser Wert wird nicht verwendet.

## Barrierefreiheit

- **Rolle:** [button]
- **Zugänglicher Name:** [der Text des Labels; nur mit Icon ist `aria-label` Pflicht]
- **Tastatur:** [Auslösen mit Enter und Leertaste; sichtbarer Fokus]
- **Mindestkontrast:** [4,5:1 Text, 3:1 Rahmen und Fokus]
- **Mindestgröße der Zielfläche:** [24 × 24 px]

## Prüfbare Nutzungsregeln

Formulieren Sie sie so, dass ein Mensch oder ein Agent mit Ja oder Nein antworten kann.

1. [In einer Ansicht gibt es höchstens einen `primary`-Button.]
2. [Das Label beginnt mit einem Verb.]
3. [`disabled` wird nie verwendet, ohne daneben den Grund zu erklären.]

## Korrektes Beispiel

[Beschreibung oder Link: primärer Button „Änderungen speichern“ am Ende eines Formulars, neben einem sekundären „Abbrechen“.]

## Grenzfall

[Beschreibung oder Link: Label in einer Übersetzung doppelt so lang. Erwartetes Verhalten: Der Button wächst und kürzt nicht; passt er mobil nicht, nimmt er die volle Breite ein.]

## Offene Fragen

Was diese Spezifikation noch nicht entscheidet. Muss ein Agent oder ein Mensch eine dieser Entscheidungen treffen, wird sie hier notiert und in der nächsten Version geklärt.

- [Ist ein Button mit Icon rechts erlaubt?]

## Verlauf

| Version | Datum | Änderung | Freigegeben von |
|---|---|---|---|
| [1.0.0] | | [erste Version] | |