Button Design Guidelines

Vollständige Übersicht für konsistente UI-Gestaltung

Design System Guidelines

Konsistente und benutzerfreundliche Button-Gestaltung für professionelle Anwendungen

6 Button-Typen
2 Stile
∞ Möglichkeiten

Farbzuordnung nach Aktionstyp

Systematische Farbkodierung für intuitive Bedienung
Primary

Primary (Blau) - Hauptaktionen

Verwendung: Die wichtigste Aktion pro Seite/Ansicht

Speichern, Senden, Anmelden, Bestätigen, Fortfahren

Success

Success (Grün) - Konstruktive Aktionen

Verwendung: Positive, aufbauende Aktionen

Neu, Erstellen, Hinzufügen, Genehmigen, Aktivieren

Warning

Warning (Orange) - Verändernde Aktionen

Verwendung: Bestehende Daten werden modifiziert

Bearbeiten, Ändern, Verschieben, Pausieren

Info

Info (Hellblau) - Informative Aktionen

Verwendung: Anzeigen, Verarbeiten, Analysieren

Ansicht, Details, Export, Berichte, Filtern

Secondary (Grau) - Untergeordnete Aktionen

Verwendung: Neutrale, untergeordnete Aktionen

Abbrechen, Schließen, Kopieren, Überspringen

Danger

Danger (Rot) - Destruktive Aktionen

Verwendung: Unwiderrufliche oder kritische Aktionen

Löschen, Entfernen, Ablehnen, Trennen

Outline vs. Gefüllt

Hierarchie durch visuelle Gewichtung

Gefüllte Buttons verwenden bei:

  • Primären und wichtigen Aktionen
  • Wenigen Buttons auf der Seite (< 5)
  • Call-to-Action Elementen
  • Kritischen Aktionen

Outline Buttons verwenden bei:

  • Sekundären Aktionen neben primären
  • Vielen Buttons auf einer Seite (> 10)
  • Tabellen/Listen
  • Button-Gruppen

Hierarchie-Beispiel

Text-Regeln

Icon, Text oder beides?
Immer

Immer MIT Text

  • Geschäftskritische Aktionen:
    Kaufen, Bezahlen, Kündigen, Abonnieren
  • Destruktive Aktionen:
    Alle Danger-Buttons, Löschen, Zurücksetzen
  • Unklare/Kontextabhängige Icons:
    Teilen, Exportieren, Synchronisieren
  • Primary Buttons:
    Hauptaktionen müssen klar benannt sein
Optional

Nur Icon erlaubt bei:

  • Universal verständliche Aktionen:
    ▶️ Play/Pause, ❌ Schließen, 🔍 Suche
  • Platzmangel:
    In Tabellen, Mobile Ansichten
  • Nach häufiger Nutzung:
    Power-User-Features (30+ Nutzungen)

Modal-Verhalten auf mobilen Geräten

Responsive Button-Gruppierung für bessere Usability
Regel

Ab 2 Buttons in Modals

Mobile Geräte: Buttons werden automatisch in einem Dropdown zusammengefasst

Bessere Übersicht und Platzersparnis auf kleinen Bildschirmen

Desktop-Ansicht:
Mobile-Ansicht:

HTML-Struktur

<div class="card-header-toolbar">
  <h5>Titel</h5>
  
  <!-- Desktop Buttons -->
  <div class="toolbar-buttons">
    <button class="btn btn-outline-warning">
      <i class="bi bi-people"></i> Sprecher zuordnen
    </button>
    <button class="btn btn-outline-info">
      <i class="bi bi-stars"></i> An MyKI senden
    </button>
  </div>
  
  <!-- Mobile Dropdown -->
  <div class="dropdown dropdown-toggle-mobile">
    <button class="btn btn-outline-secondary dropdown-toggle">
      <i class="bi bi-three-dots-vertical"></i> Aktionen
    </button>
    <div class="dropdown-menu dropdown-menu-end p-2">
      <button class="btn btn-outline-warning w-100 mb-2">
        <i class="bi bi-people"></i> Sprecher zuordnen
      </button>
      <button class="btn btn-outline-info w-100">
        <i class="bi bi-stars"></i> An MyKI senden
      </button>
    </div>
  </div>
</div>

CSS-Klassen für responsive Verhalten

.toolbar-buttons - Wird auf Mobile ausgeblendet

.dropdown-toggle-mobile - Wird nur auf Mobile angezeigt

.card-modal.mobile-dropdown - Container-Klasse

.w-100.text-start - Vollbreite Buttons im Dropdown

Code-Beispiele für alle UI-Elemente

Kopierfertige HTML-Snippets für alle Button-Varianten

Gefüllte Buttons

<button class="btn btn-primary"><i class="bi bi-star"></i> Primary</button>
<button class="btn btn-success"><i class="bi bi-check-circle"></i> Success</button>
<button class="btn btn-warning"><i class="bi bi-exclamation-triangle"></i> Warning</button>
<button class="btn btn-info"><i class="bi bi-info-circle"></i> Info</button>
<button class="btn btn-secondary"><i class="bi bi-circle"></i> Secondary</button>
<button class="btn btn-danger"><i class="bi bi-x-circle"></i> Danger</button>

Outline Buttons

<button class="btn btn-outline-primary"><i class="bi bi-star"></i> Primary</button>
<button class="btn btn-outline-success"><i class="bi bi-check-circle"></i> Success</button>
<button class="btn btn-outline-warning"><i class="bi bi-exclamation-triangle"></i> Warning</button>
<button class="btn btn-outline-info"><i class="bi bi-info-circle"></i> Info</button>
<button class="btn btn-outline-secondary"><i class="bi bi-circle"></i> Secondary</button>
<button class="btn btn-outline-danger"><i class="bi bi-x-circle"></i> Danger</button>

Button-Größen

<button class="btn btn-primary btn-sm"><i class="bi bi-star"></i> Klein</button>
<button class="btn btn-primary"><i class="bi bi-star"></i> Standard</button>
<button class="btn btn-primary btn-lg"><i class="bi bi-star"></i> Groß</button>

Buttons mit Icons

<button class="btn btn-success">
  <i class="bi bi-plus"></i> Neu
</button>
<button class="btn btn-outline-info">
  <i class="bi bi-eye"></i> Ansicht
</button>
<button class="btn btn-outline-secondary" title="Schließen">
  <i class="bi bi-x"></i>
</button>

Button-Gruppen

<div class="btn-group" role="group">
  <button class="btn btn-outline-primary active"><i class="bi bi-calendar-day"></i> Tag</button>
  <button class="btn btn-outline-primary"><i class="bi bi-calendar-week"></i> Woche</button>
  <button class="btn btn-outline-primary"><i class="bi bi-calendar-month"></i> Monat</button>
</div>

Dropdown Buttons

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" 
          data-bs-toggle="dropdown">
    <i class="bi bi-gear"></i> Aktionen
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#"><i class="bi bi-pencil"></i> Bearbeiten</a></li>
    <li><a class="dropdown-item" href="#"><i class="bi bi-files"></i> Kopieren</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-trash"></i> Löschen</a></li>
  </ul>
</div>

Kontextabhängige Beispiele

Praxisnahe Anwendungsfälle

Email-Client

Dokumentenverwaltung

Datentabelle

Audio-Player

Goldene Regeln

Konsistenz ist König

Gleiche Aktion = Gleiche Farbe in der ganzen App

Hierarchie beachten

Max. 1-2 Primary Buttons pro Ansicht

Kontext vor Regel

"Löschen" kann in Bestätigungs-Dialog Primary sein

User First

Klarheit > Ästhetik