Buttons

Mithilfe von Buttons werden verschiedene Handlungsmöglichkeiten des Nutzers dargestellt und einer klaren Hierachie untergeordnet. Ein Button sollte für klar definierte Hauptaktionen verwendet werden.

Primär-Button

Der Primäre-Button wird für die wichtigsten Aktionen auf einer Seite oder View eingesetzt.

Primär-Button
Sekundär-Button

Der Sekundäre-Button wird für untergeordnete Aktionen eingesetzt.

Sekundär-Button
Kontur-Button

Der Kontur-Button wird als Zusatz für den Primär-Button eingesetzt.

Kontur-Button

    //Primär-Button
    

    //Sekundär-Button
    

    //Kontur-Button

Größen

Standard

Roboto 14px Regular
Innenabstand 8px/21px
Border radius 2px

Groß (Optional)

Roboto 20px Regular
Innenabstand 8px/21px
Border radius 2px

Klein (Optional)

Roboto 12px Regular
Innenabstand 4px/8px
Border radius 2px 


    //Standard
    

    //Groß
    

    //Klein

Status

  • Hover

    Abgedunkelt mit optischer Erhabenheit durch Schatten.
    Schatten: 0 3px 8px 0 rgba(0, 0, 0, 0.17);

  • Focus

    Transparente Outline
    Border: 3px transparenz Vollton 50%.

  • Disabled

    Button im ganzen transparent.
    Transparenz: 65%





Button Gruppen

Buttons können gruppiert werden, um mehrere Aktionen nebeneinander anzubieten.

Primär und Sekundär | Gruppe

Der Primär Button unterstreicht eine wichtigere Handlung gegenüber dem Sekundär Button. Er wird je View nur einmal verwendet, wobeit es mehrere Sekundär Buttons geben kann.



Primär, Kontur und Sekundär | Gruppe

Gibt es wichtige Handlungen die nach hierarchie gegliederd werden müssen kann optional der Kontur Button eingesetzt werden.



Primär und Sekundär mit Signalfarben | Gruppe

Der Primär Button kann nach Situation mit einer Signalfarbe deklariert werden, um Aktionen noch deutlicher hervorzuheben (Speichern, Löschen).

Farben

Die Primäre Farbe bezieht sich auf die jeweilige Anwendungsfarbe.
Um bestimmte Aktionen hervorzuheben können Signalfarben verwendet werden z.B (Speichern, Löschen).
Die Sekundäre Farbe untergeordnete Aktionen wie Abbrechen- oder Zurück genutzt werden.



Für die Formatierung der Buttons stehen acht erforderliche Klassen zur Verfügung.
.btn-primary .btn-secondary .btn-success .btn-danger .btn-warning .btn-info .btn-light .btn-dark 


    //Vollflächig
    
    
    
    
    
    
    
    
    

    //Kontur

Block Button

Block Buttons nehemen die volle Breite ein.

Icon Button

Icon Buttons werden eingesetzt, um klassische Systeminteraktionen aufzurufen (Speichern, Drucken oder Herunterladen...) . Der Icon Button wird bevorzugt ohne Text Label verwendet und steht in 3 festgelegten Größen zur Verfügung. Transparenzen je Status werden nach Icon Vorgaben dargestellt.

Klein

Die enthaltene Icon Größe beträgt 20x20px.

Standard

Die enthaltene Icon Größe beträgt 24x24px.

Groß

Die enthaltene Icon Größe beträgt 48x48px.

Einbinden: Icon Button

Über die Klasse .btn-ic wir der Text Button als Icon Button deklariert.
Neben der Standardgröße können die oben definierten Klassen .btn-sm .btn-lg wie gewohnt verwendet werden.

Das enthaltene Icon wird über das "i" Element aufgerufen, Art und Farbe wird über die jeweilige Klasse dargestellt.
Übersicht über alle Verfügbaren System Icons.


    //Klein
    
    

    //Standard
    
    

    //Groß