Verwendung
Toggle-Buttons werden benutzt, um möglichst einfach Auswahlen zwischen zwei sich gegenseitig ausschließenden Optionen wie der Antwort Ja oder Nein auf eine entsprechend formulierte eindeutige Fragestellung zu treffen. Sie helfen dabei, Optionen auszuwählen, Ansichten zu wechseln oder zu erweitern.
Toggle-Buttons können Texte oder optional auch Kombinationen von Text-Beschriftungen mit Icons enthalten. Die Beschriftungen der Segmente sollten kurz und prägnant sein. Icons sind zwar nur unterstützend, aber müssen trotzdem klar kommunizieren, welche Option sie darstellen. Vermeiden Sie das Mischen von reinen Text-Beschriftungen in der einen Option mit kombinierten Text- und Icon-Beschriftungen in der anderen Option.
Wenn Sie in Toggle-Buttons sowohl Text als auch Icons verwenden, dann wird das Icon durch das Häkchensymbol ersetzt, sobald das Segment ausgewählt ist.
- Die Möglichkeit zur Mehrfachauswahl ist in Toggle-Buttons nicht vorgesehen, verwenden Sie hierfür Checkboxen.
- Toggle-Buttons können auf anderen Komponenten platziert werden, beispielsweise in Bottom Sheets oder Dialogen.
- Durch erneutes Betätigen eines zuvor ausgewählten Segments wird dieses wieder abgewählt und der Toggle-Buttons in seinen ursprünglichen Zustand versetzt.
Positionierung & responsives Verhalten
Toggle-Buttons dürfen nicht die gesamte Breite größerer Bildschirme oder Bereiche einnehmen. Dadurch kann auf beiden Seiten der Segmentbeschriftung zu viel Abstand entstehen, was die Verwendung der Toggle-Buttons insbesondere auf Touch-UIs größerer Geräteklassen erschwert.
Do’s and Dont’s
So:
- Verwenden Sie klare und kurze Beschriftungen.
- Beschriftungen haben eine einheitliche Länge.
So nicht:
- Zu lange Texte umbrechen in eine neue Zeile.
- Redundante oder nichtssagende generische Icons.
