Logout-Button

Der Logout-Button ist ein spezieller Eintrag, der automatisch erscheint, wenn Firebase Auth in deiner App aktiv ist und ein Nutzer angemeldet ist. Er kann nicht manuell erstellt oder gelöscht werden, aber du kannst sein Aussehen vollständig anpassen.

---

Besonderheiten des Logout-Buttons

Automatische Steuerung

Der Logout-Button wird automatisch durch Firebase Auth gesteuert:

• Er erscheint nur, wenn ein Nutzer angemeldet ist
• Er kann nicht gelöscht werden
• Er wird automatisch am Ende der Liste platziert
• Ein Firebase Auth Badge zeigt an, dass er von Firebase gesteuert wird

Was du anpassen kannst

• Position (per Drag & Drop verschieben)
• Button-Stil (Elevated, Outlined, Text)
• Farben und Typografie
• Icon und Icon-Position
• Abmessungen und Abstände

Was du NICHT anpassen kannst

• Den Logout-Button löschen
• Die Logout-Funktion selbst

---

Grundeinstellungen-Tab

Im Grundeinstellungen-Tab konfigurierst du den Button-Stil und den Text.

Button-Stil

Was es macht: Bestimmt das visuelle Erscheinungsbild des Buttons.

So findest du es: Grundeinstellungen > Button-Stil

Optionen:

Stil	Beschreibung
Elevated	Gefüllter Button mit Schatten (Standard)
Outlined	Umrandeter Button ohne Füllung
Text	Nur Text, keine Umrandung oder Füllung

---

Icon-Position

Was es macht: Bestimmt, wo das Icon relativ zum Text erscheint.

So findest du es: Grundeinstellungen > Icon-Position

Optionen:

Position	Beschreibung
Leading	Icon links vom Text
Trailing	Icon rechts vom Text
None	Kein Icon anzeigen

---

Button-Text

Was es macht: Der angezeigte Text auf dem Button.

So findest du es: Grundeinstellungen > Inhalt > Button-Text

Standard: “Logout” oder “Abmelden” (je nach Spracheinstellung)

Bei mehrsprachigen Apps kannst du für jede Sprache einen anderen Text eingeben.

---

Icon

Was es macht: Das Icon auf dem Button.

So findest du es: Grundeinstellungen > Inhalt > Symbol auswählen

Bedienung:

1. Tippe auf “Symbol auswählen”
2. Wähle ein Icon aus der Galerie

Empfohlene Icons:

• Logout-Icon
• Tür-Icon
• Pfeil-raus-Icon

---

Farben-Tab

Im Farben-Tab passt du die Farben des Buttons an.

Einstellungen

Einstellung	Standard	Beschreibung
Hintergrundfarbe	Fehlerfarbe (Rot)	Füllfarbe des Buttons
Textfarbe	Weiß	Farbe des Button-Texts
Rahmenfarbe	Fehlerfarbe	Nur bei Outlined-Stil sichtbar

Rot für Logout

Die Standard-Fehlerfarbe (Rot) ist eine gute Wahl für den Logout-Button. Sie signalisiert dem Nutzer, dass es sich um eine wichtige Aktion handelt.

---

Typografie-Tab

Im Typografie-Tab passt du die Textgestaltung an.

Einstellungen

Einstellung	Standard	Bereich	Beschreibung
Schriftart	Theme-Schriftart	Galerie	Die verwendete Schriftfamilie
Schriftgröße	16 px	10-32 px	Größe des Texts
Schriftstärke	500	100-900	Dicke der Schrift
Kursiv	Aus	An/Aus	Schrägstellung des Texts
Buchstabenabstand	0 px	-2 bis 4 px	Abstand zwischen Buchstaben

---

Icon-Tab

Der Icon-Tab erscheint nur, wenn die Icon-Position nicht “None” ist.

Einstellungen

Einstellung	Standard	Beschreibung
Icon-Farbe	Textfarbe (Weiß)	Farbe des Icons

Dark Mode Toggle: Du kannst unterschiedliche Icon-Farben für Light und Dark Mode festlegen.

Icon-Größe und Abstand

Einstellung	Standard	Bereich	Beschreibung
Icon-Größe	20 px	12-48 px	Größe des Icons
Icon-Abstand	8 px	0-24 px	Abstand zwischen Icon und Text

---

Abmessungen-Tab

Im Abmessungen-Tab passt du die Größe und Form des Buttons an.

Einstellungen

Einstellung	Standard	Bereich	Beschreibung
Horizontaler Abstand	24 px	8-48 px	Innenabstand links und rechts
Vertikaler Abstand	12 px	4-24 px	Innenabstand oben und unten
Eckenrundung	8 px	0-24 px	Rundung der Ecken
Rahmenbreite	1 px	0.5-4 px	Nur bei Outlined-Stil
Erhöhung	2	0-12	Nur bei Elevated-Stil

---

Beispiel-Konfigurationen

Standard (Elevated Rot)

Einstellung	Wert
Stil	Elevated
Hintergrund	Rot (Fehlerfarbe)
Text	Weiß
Icon	Logout, Leading
Eckenrundung	8 px

---

Outlined

Einstellung	Wert
Stil	Outlined
Hintergrund	Transparent
Rahmenfarbe	Rot
Textfarbe	Rot
Icon	Logout, Leading
Rahmenbreite	2 px

---

Pill-Button

Einstellung	Wert
Stil	Elevated
Hintergrund	Rot
Text	Weiß
Icon	None
Eckenrundung	24 px
Horizontaler Abstand	32 px

---

Dezent (Text-Stil)

Einstellung	Wert
Stil	Text
Textfarbe	Sekundärfarbe
Icon	None
Schriftgröße	14 px

---

Position ändern

Obwohl der Logout-Button standardmäßig am Ende der Liste erscheint, kannst du ihn verschieben:

1. Aktiviere den Neu-Anordnen-Modus in der Toolbar
2. Ziehe den Logout-Button an die gewünschte Position
3. Deaktiviere den Neu-Anordnen-Modus

Am Ende lassen

Es ist Best Practice, den Logout-Button am Ende der Einstellungen zu lassen. Nutzer erwarten ihn dort.

---

Tipps

Rot für Warnung

Die rote Farbe signalisiert dem Nutzer, dass Logout eine wichtige Aktion ist. Behalte sie bei oder wähle eine andere auffällige Farbe.

Icon hilft

Ein Logout-Icon macht den Button sofort erkennbar. Nutze es, wenn der Text allein nicht eindeutig ist.

Abstand davor

Füge einen größeren Abstand (32-48 px) vor dem Logout-Button ein, um ihn vom Rest abzuheben.

Testen!

Teste den Logout-Button in der Live-App. Er sollte den Nutzer zuverlässig abmelden und zum Login-Screen führen.

Nicht verstecken

Auch wenn du den Button ausblenden kannst (Auge-Symbol), ist das keine gute Idee. Nutzer sollten sich immer abmelden können.

---

Häufige Fragen

Warum sehe ich keinen Logout-Button?

Der Button erscheint nur, wenn:

• Firebase Auth in deiner App aktiviert ist
• Ein Nutzer angemeldet ist

Im Edit Mode (App Builder) ist immer ein Demo-User angemeldet, daher sollte der Button dort immer sichtbar sein.

Kann ich den Button löschen?

Nein, der Button wird automatisch durch Firebase Auth gesteuert. Du kannst ihn ausblenden, aber das ist nicht empfohlen.

Warum hat der Button ein Badge “Firebase Auth”?

Das Badge zeigt an, dass dieser Button automatisch durch Firebase Auth gesteuert wird und nicht manuell erstellt werden kann.

Kann ich mehrere Logout-Buttons haben?

Nein, es gibt immer nur einen Logout-Button pro Einstellungsseite.