Ein Button ist ein interaktives UI-Element, das beim Klicken oder Antippen eine definierte Aktion auslöst – z. B. Formular absenden, Navigation, Bestätigung oder Löschen.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UI-Komponenten · Niveau: Einsteiger Synonyme / Auch bekannt als: Schaltfläche, Call-to-Action (CTA), Action Button, Push Button
Was ist ein Button?
Ein Button (Schaltfläche) ist eines der grundlegendsten Interaktionselemente im Interface-Design. Er kommuniziert dem Nutzer, dass eine Handlung möglich ist, und löst diese bei Aktivierung aus. Buttons erscheinen in nahezu jedem digitalen Produkt – von Web-Apps über Mobile-Interfaces bis hin zu Betriebssystem-Dialogen.
Erklärung
Varianten (Hierarchie)
Die wichtigste Klassifizierung von Buttons folgt ihrer visuellen Gewichtung und Handlungshierarchie:
- Primary Button: Hauptaktion auf einem Screen. Farblich hervorgehoben (Markenfarbe), gefüllter Hintergrund. Maximal ein Primary Button pro Ansicht.
- Secondary Button: Ergänzende Aktion mit geringerem Gewicht. Outline-Stil oder gedämpfte Farbe.
- Tertiary / Text Button: Minimale visuelle Präsenz, reine Textform. Für Nebenaktionen wie „Abbrechen".
- Ghost Button: Transparenter Hintergrund mit Rahmen. Häufig auf farbigen Hintergründen.
- Danger / Destructive Button: Signalisiert irreversible Aktionen (Löschen, Deaktivieren). Rotton als Warnfarbe.
- Icon Button: Nur Icon, kein Label – z. B. Schließen-Button (×). Benötigt zwingend ein
aria-label. - FAB (Floating Action Button): Schwebend positionierter Primär-Button, typisch im Material Design.
States (Zustände)
Jeder Button durchläuft mehrere Zustände, die visuell erkennbar sein müssen:
| State | Beschreibung |
|---|---|
| Default | Normalzustand |
| Hover | Maus bewegt sich über den Button |
| Active / Pressed | Klick wird ausgeführt |
| Focus | Tastaturfokus (Outline sichtbar!) |
| Disabled | Aktion nicht verfügbar, gedimmt |
| Loading | Aktion läuft, Spinner im Button |
Anatomie
Ein Button besteht typischerweise aus: Container (Hintergrund + Rahmen), Label (Text), optionalem Leading/Trailing Icon, State-Layer (Overlay für Hover/Active).
Accessibility (WCAG 2.1)
- Kontrastverhältnis Text/Hintergrund: mindestens 4,5:1 (WCAG AA)
- Minimale Zielgröße: 44 × 44 px (WCAG 2.5.5, Apple HIG)
- Fokus-Indikator darf niemals entfernt werden (
outline: noneohne Alternative ist ein Fehler) - Disabled Buttons:
aria-disabled="true"statt HTMLdisabled, damit Screenreader den Kontext noch lesen können - Icon-only Buttons: immer
aria-labelodertitle
Beispiele
- Google Search: Der „Google Suche"-Button ist ein klassischer Primary Button – weißer Hintergrund, dezente Border, zentrierter Text. Der „Auf gut Glück"-Button ist Secondary ohne visuelle Überbetonung.
- Stripe Dashboard: Verwendet ein klares Button-Hierarchie-System: „Add payment method" als Primary (Lila, gefüllt), „Cancel" als Tertiary Text Button – minimale visuelle Konkurrenz.
- Mobile vs. Desktop: Auf Mobilgeräten (iOS/Android) sind Buttons mindestens 44–48 px hoch für sichere Touch-Flächen. Desktop-Buttons können bei 32–36 px liegen, da Mausklicks präziser sind.
- Accessibility Best Practice: GitHub zeigt beim Keyboard-Tab ein deutlich sichtbares blaues Fokus-Outline um Buttons – konformkonform mit WCAG 2.4.7 (Focus Visible).
- Häufiger Fehler: Mehrere gleichwertige Primary Buttons auf einer Seite verwenden – z. B. drei blaue „Weiter"-Buttons in einem Formular. Das verwirrt Nutzer und schwächt die Handlungshierarchie. Faustregel: pro Viewport nur ein Primary Button.
In der Praxis
Figma: Button-Komponenten werden mit Variants angelegt (Type: Primary/Secondary/Ghost, Size: SM/MD/LG, State: Default/Hover/Disabled). Auto Layout ermöglicht dynamische Breitenanpassung bei Textänderung. Properties wie hasIcon und iconPosition werden als Boolean/Enum-Variants definiert.
HTML/CSS-Grundstruktur: ``html <button type="button" class="btn btn-primary">Jetzt kaufen</button> <button type="button" class="btn btn-secondary" aria-label="Abbrechen">Abbrechen</button> ``
ARIA: role="button" nur nötig, wenn kein <button>-Element verwendet wird (z. B. bei einem <div>-Button – generell vermeiden). aria-pressed für Toggle-Buttons.
Vergleich & Abgrenzung
| Komponente | Wann verwenden |
|---|---|
| Button | Aktionen auslösen (Submit, Delete, Open Modal) |
| Link (Anchor) | Navigation zu anderem Ort/URL |
| Toggle Switch | Binäre Einstellung ein/aus, sofortige Wirkung |
| Checkbox | Mehrfachauswahl aus Liste, keine sofortige Aktion |
Buttons lösen Aktionen aus, Links ermöglichen Navigation – diese Trennung ist für Accessibility entscheidend (Screenreader unterscheiden zwischen <button> und <a>).
Häufige Fragen (FAQ)
Wie viele Primary Buttons darf eine Seite haben? Als Faustregel gilt: pro sichtbarem Bereich (Viewport oder Modal) maximal ein Primary Button. Mehrere gleichwertige Primäraktionen verwirren Nutzer und schwächen die visuelle Hierarchie. Bei mehreren Aktionen eine als primär priorisieren, die anderen als Secondary oder Tertiary gestalten.
Warum darf der Fokus-Indikator nicht entfernt werden? Der Fokus-Outline ist für Tastaturnutzer und Menschen mit motorischen Einschränkungen essenziell – sie navigieren Interfaces ohne Maus. WCAG 2.4.7 verlangt sichtbare Fokusindikatoren. Das Entfernen via outline: none ohne gleichwertigen Ersatz ist ein Barrierefreiheits-Verstoß und schließt einen Teil der Nutzer aus.
Verwandte Einträge
Weiterführend
- Nielsen Norman Group – „Button UX Design": nngroup.com
- Material Design 3 – Buttons: m3.material.io/components/buttons
- Apple Human Interface Guidelines – Buttons: developer.apple.com/design/human-interface-guidelines/buttons
- WCAG 2.1 – Success Criterion 1.4.3 Contrast: w3.org/WAI/WCAG21
