Button Widgets

Buttons sind die wichtigsten interaktiven Elemente deiner App. BLOCQ bietet fünf Button-Typen, die du individuell gestalten kannst.

Übersicht

Button-Typ	Verwendung	Beispiel
Primär	Hauptaktionen	”Speichern”, “Absenden”
Sekundär	Nebenaktionen	”Abbrechen”, “Zurück”
Text	Dezente Aktionen	”Mehr erfahren”, Links
Icon	Kompakte Aktionen	Teilen, Favorisieren
FAB	Haupt-Seitenaktion	Neuer Beitrag, Hinzufügen

---

Primärer Button

Der auffälligste Button für die wichtigsten Aktionen.

Aussehen (Appearance)

Farben

Einstellung	Beschreibung
Hintergrundfarbe	Füllfarbe des Buttons
Textfarbe	Farbe der Beschriftung
Rahmenfarbe	Farbe des Randes (wenn aktiviert)

Rahmen & Elevation

Einstellung	Bereich	Beschreibung
Rahmenbreite	0-4 px	Dicke des Randes
Elevation	0-24	Stärke des Schattens

Schatten

Einstellung	Beschreibung
Schattenfarbe	Farbe des Schattens
Blur Radius	Weichheit des Schattens
Spread Radius	Ausbreitung des Schattens
Offset X/Y	Position des Schattens

Gradient

Einstellung	Beschreibung
Gradient aktivieren	Farbverlauf statt Vollfarbe
Startfarbe	Erste Farbe des Verlaufs
Endfarbe	Zweite Farbe des Verlaufs
Richtung	Verlaufsrichtung (Horizontal, Vertikal, Diagonal)

Layout

Einstellung	Bereich	Beschreibung
Höhe	36-64 px	Höhe des Buttons
Horizontales Padding	8-48 px	Innenabstand links/rechts
Vertikales Padding	4-24 px	Innenabstand oben/unten
Eckenradius	0-32 px	Rundung der Ecken
Schriftgröße	12-24 px	Größe der Beschriftung
Icon-Größe	16-32 px	Größe des optionalen Icons
Icon-Abstand	4-16 px	Abstand zwischen Icon und Text
Schriftart	Google Fonts	Schriftart der Beschriftung

Zustände (States)

Für jeden Zustand kannst du separate Farben definieren:

Normal

Standardzustand des Buttons.

Gedrückt (Pressed)

Einstellung	Beschreibung
Hintergrundfarbe	Farbe beim Drücken
Textfarbe	Textfarbe beim Drücken
Overlay-Opacity	Stärke der Abdunklung

Deaktiviert (Disabled)

Einstellung	Beschreibung
Hintergrundfarbe	Farbe im deaktivierten Zustand
Textfarbe	Textfarbe im deaktivierten Zustand
Opacity	Gesamttransparenz

Fokus

Einstellung	Beschreibung
Hintergrundfarbe	Farbe bei Fokus
Textfarbe	Textfarbe bei Fokus
Rahmenfarbe	Rahmenfarbe bei Fokus

Erweitert (Advanced)

Einstellung	Optionen	Beschreibung
Splash-Effekt	An/Aus	Ripple-Animation beim Tippen
Animationsdauer	100-500 ms	Dauer der Zustandsübergänge
Mindestbreite	0-200 px	Minimale Button-Breite

---

Sekundärer Button

Für weniger wichtige Aktionen, meist als Outline-Button.

Die Einstellungen sind identisch zum primären Button, aber mit anderen Standardwerten:

• Transparenter Hintergrund
• Farbiger Rahmen
• Farbiger Text

---

Text Button

Minimalistischer Button ohne Hintergrund.

Besonderheiten

• Kein Hintergrund im Normalzustand
• Nur Text (und optional Icon)
• Dezenter Hover/Press-Effekt

Einstellungen

Die meisten Einstellungen entsprechen dem primären Button. Zusätzlich:

Einstellung	Beschreibung
Unterstreichung	Text unterstrichen anzeigen
Hover-Hintergrund	Leichte Hinterlegung beim Hover

---

Icon Button

Kompakter Button nur mit Symbol.

Besonderheiten

• Quadratisch oder rund
• Nur Icon, kein Text
• Ideal für Toolbars

Einstellungen

Einstellung	Bereich	Beschreibung
Größe	32-56 px	Gesamtgröße des Buttons
Icon-Größe	18-32 px	Größe des Symbols
Hintergrundfarbe	-	Füllfarbe (oft transparent)
Icon-Farbe	-	Farbe des Symbols
Eckenradius	0-28 px	Rundung (28 = rund)

---

FAB (Floating Action Button)

Schwebender Aktions-Button für die Hauptaktion einer Seite.

Besonderheiten

• Schwebt über dem Inhalt
• Prominent positioniert
• Standardmäßig rund

Einstellungen

Alle Einstellungen des primären Buttons, plus:

Einstellung	Optionen	Beschreibung
Größe	Mini, Normal, Large	Größenvariante
Extended	An/Aus	Mit Text neben dem Icon
Position	Links, Mitte, Rechts	Horizontale Positionierung
Elevation	0-24	Schwebehöhe (Schatten)

Extended FAB

Wenn “Extended” aktiviert ist:

• Zeigt Icon und Text
• Breitere, abgerundete Form
• Zusätzliche Text-Einstellungen

---

Light Mode vs. Dark Mode

Jeder Button kann separate Farben für Light und Dark Mode haben:

1. Nutze den Umschalter im Vorschau-Bereich
2. Bearbeite die Farben für den jeweiligen Modus
3. Teste beide Modi in der Vorschau

Tipp: Im Dark Mode sollten Buttons oft weniger gesättigt oder heller sein, um gut sichtbar zu bleiben.

---

Tipps

Konsistente Hierarchie

Primäre Buttons sollten auffälliger sein als sekundäre. Das hilft Nutzern, die wichtigste Aktion zu finden.

Kontrast beachten

Textfarbe muss auf Hintergrundfarbe gut lesbar sein. Mindestkontrast: 4.5:1.

Nicht zu viele FABs

Pro Bildschirm maximal einen FAB verwenden.

Zustände testen

Vergiss nicht die Pressed- und Disabled-Zustände - sie verbessern das Nutzererlebnis.

Einheitliche Radien

Verwende für alle Buttons denselben Eckenradius für ein konsistentes Design.

Häufige Fragen

Wie mache ich einen vollständig runden Button?

Setze den Eckenradius auf die Hälfte der Button-Höhe (z.B. Höhe 48 px = Radius 24 px).

Kann ich verschiedene Schriftarten für verschiedene Buttons verwenden?

Ja, jeder Button-Typ hat seine eigene Schriftart-Einstellung. Für Konsistenz wird aber empfohlen, die gleiche Schriftart zu verwenden.

Warum sieht mein Button im Dark Mode komisch aus?

Prüfe, ob du die Dark Mode Farben separat eingestellt hast. Wechsle mit dem Umschalter in den Dark Mode und passe die Farben an.

Was ist der Unterschied zwischen Elevation und Shadow?

• Elevation: Einfache Erhöhung mit automatischem Schatten
• Shadow: Vollständige Kontrolle über den Schatten

Du kannst beides kombinieren oder nur eins verwenden.