Atoms
Atoms sind die kleinsten Bausteine unseres Systems. Sie werden direkt eingesetzt oder zu Molecules kombiniert.
Button
Section titled “Button”States
Section titled “States”- Default
- Hover
- Active
- Disabled
- Loading
Variants
Section titled “Variants”- Primary
- Secondary
- Tertiary
- Ghost
- Icon-only
Accessibility
Section titled “Accessibility”- Sichtbarer Fokuszustand
- Korrekte Rollen und Attribute bei Loading und Disabled
- Ausreichender Kontrast in allen States
- Primäre Aktion pro View klar priorisieren
- Destruktive Aktionen klar kennzeichnen
- Kein Button für reine Navigation
States
Section titled “States”- Default
- Focus
- Filled
- Error
- Disabled
Variants
Section titled “Variants”- Text
- Password
- Search
Accessibility
Section titled “Accessibility”- Eindeutige
label-Zuordnung - Fehlerzustand mit Text und
aria-describedby - Tastaturbedienung ohne Blocker
- Platzhalter nur als Beispiel, nicht als Label-Ersatz
- Fehlermeldungen immer direkt am Feld
- Eingabearten passend wählen
States
Section titled “States”- Default
- Required
- Disabled
Variants
Section titled “Variants”- Standard
- Inline
- Assistive
Accessibility
Section titled “Accessibility”- Label immer mit Feld verknüpfen
- Required klar markieren
- Labels nie weglassen
- Kurz und eindeutig formulieren
States
Section titled “States”- Default
- Hover
- Active
- Disabled
Variants
Section titled “Variants”- Solid
- Outline
- Small
- Large
Accessibility
Section titled “Accessibility”- Dekorative Icons mit
aria-hidden - Informative Icons mit
aria-label
- Bedeutungen konsistent halten
- Icons nicht als alleinige Aktion ohne Text einsetzen