Properties
Properties definieren die Eigenschaften und verschiedenen Ausprägungen einer Komponente. Sie ermöglichen, die Komponente flexibel an unterschiedliche Anforderungen anzupassen. Da Properties in Design und Entwicklung identisch sind, wird die Übergabe vereinfacht und die Konsistenz sichergestellt.
Emphasis
Die Emphasis-Property legt die visuelle Gewichtung des Tags fest. Mit den Werten Weak (Standard), Origin und Strong kann die Bedeutung oder Hervorhebung des Inhalts gesteuert werden, je nach gewünschter farblichen Hervorhebung des Tags und Art der Dringlichkeit/Priorisierung bzw. Gewichtung zu anderen Inhalten.
Semantic
Die Semantic-Property bestimmt die semantische Bedeutung und visuelle Darstellung des Tags. Die verfügbaren Werte sind: Adaptive (Standard), das sich flexibel an verschiedene Umgebungen anpasst, sowie Neutral, Critical, Informational, Successful und Warning, die jeweils spezifische Kontexte und Bedeutungen visuell unterstützen.
Behavior
Das Behaviour definiert das Interaktionsverhalten der Tags, ob sie statisch sind oder verschiedene interaktive Funktionalitäten bieten:
- Static: Kein interaktives Verhalten
- Interactive (Button): Reagiert auf Interaktionen wie ein Button
- Interactive (Link}: Repräsentiert einen anklickbaren Link
- Interactive Toggle (Checkbox): Ermöglicht An- und Abwahl von Tags (Mehrfachauswahl möglich)
- Interactive Toggle (Radio): Ermöglicht eine Auswahl zwischen verschiedenen Optionen
- Removeable: Kann entfernt/deaktiviert werden
Checked
Die Checked-Property gibt den aktuellen Zustand des Interactive Toggle Tags an. Bei True ist der Tag aktiviert (ausgewählt), bei False ist er deaktiviert (nicht ausgewählt). Der Standardwert ist False.
Disabled
Die Disabled-Property legt fest, ob der Interactive Tag aktiv oder inaktiv ist. Bei Disabled = False ist der Tag interaktiv und unterstützt Zustände wie Hover, Pressed und Focused. Wenn Disabled = True gesetzt ist, wird der Tag inaktiv und zeigt keine interaktiven Zustände mehr. In diesem Fall ist er nicht klickbar.
Show Icon
Die Show-Icon-Property legt fest, ob ein Icon im Tag angezeigt wird. Wenn die Property auf True gesetzt ist, wird ein Icon dargestellt. Der Standardwert ist False, bei dem kein Icon angezeigt wird.
No Text
Die No-Text-Property legt fest, ob der Text des Buttons ausgeblendet wird. Bei Show Icon = False muss No Text immer False sein. Wird jedoch Show Icon = True und No Text = True gesetzt, wird ein reiner Icon-Button dargestellt.
Show Slot
Die Show-Slot-Property, wenn auf True gesetzt, blendet einen Slot für zusätzlichen Content im Tag ein. Der Standardwert ist False. Beachte bitte die Dokumentation für den korrekten Einsatz, welche Art von Content in den Slot eingesetzt werden kann.
Overflow
Show Checked State
Die Show-Checked-State-Property bestimmt, ob für den Interactive Toggle Tag ein zusätzliches, optionales Icon angezeigt wird. Dies erleichtert die Differenzierung zum Static Tag beim gleichzeitigen Einsatz sowie die Erkennbarkeit des Toggle-Zustands. Der Standardwert ist True.
Example Strong
Boxmodel
Das Boxmodel definiert den Aufbau einer Komponente. Es nutzt die unten genannten Tokens, um Konsistenz und Skalierbarkeit zu gewährleisten.
Token
Size | db-sizing-fixed-sm |
Padding-Full | db-spacing-fixed-3xs |
Padding-V | db-spacing-fixed-3xs |
Padding-H | db-spacing-fixed-2xs |
Spacing | db-spacing-fixed-2xs |
Border Radius | db-border-radius-xs |
Border Height | db-border-height-3xs |
Icon Size | db-base-icon-font-size-sm |
Text Size | db-type-body-sm-regular |
Kurz, Knackig, Klar
Setze die Tag-Komponente ein, wenn
- du Kategorien oder Kennzeichnungen darstellen oder in read-only-Situationen arbeiten möchtest,
- du Daten auf einer Seite filtern, innerhalb einer Komponente sortieren oder Suchfunktionen unterstützen willst,
- du im Chat-Flow Entscheidungen treffen und den Ablauf voranbringen möchtest,
- du benutzergenerierte Labels erstellen und diese bei Bedarf entfernen willst.
Guidelines to Go
- es gibt statische, interaktive und removable Tags
- Interaktive Tags: weisen verschiedenes Verhalten auf: Button/Link oder ein Toggle wie Checkbox/Radio.
- Adaptive Tags in unterschiedlichem Farb-Kontext, z.B. für Kategorien.
- Tags sind einzeilig und lange Texte werden ausgepunktet
- Nutze den Slot für individuelle Inhalte (siehe Doku!)
- Tags für statische oder interaktive Kategorien, Badges für nicht-inkteraktive Statusinformationen.
- Gebe beim Icon Tag immer einen Screenreader Text an
Static Tag
Static Tags haben keine interaktiven Funktionen und werden in der Regel zur Kategorisierung und Kennzeichnung verwendet werden. Sie erfordern keine Benutzerinteraktion.
Interactive Tag
Interactive Tags können unterschiedliche Verhaltensweisen aufzeigen:technisch können Tags ähnlich wie Buttons oder Links funktionieren, oder das Verhalten von Checkbox oder Radios abbilden.
Obwohl der einfache Interactive Tag die gleiche Interaktivität wie ein Button oder ein Link haben kann, sollte er nicht als Ersatz für diese beiden Komponenten eingesetzt werden.
Buttons sind z.B. für klar definierte Aktionen wie das Absenden eines Formulars, das Speichern von Daten, für wichtige Aktionen oder das Durchführen durch Prozessschritte vorgesehen.Links leiten zu einer anderen Seite (durchaus ohne direkten Kontext) oder führen in der User Journey von der aktuellen Stelle zu anderen Inhalten, die die Benutzererfahrung auch unterbrechen können.Interactive Tags hingegehen können genutzt werden, um kontextbezogene, ergänzende und situationsabhängige Optionen anzubieten, die als Gruppe interaktiver Elemente auftreten um die User Journey zu optimieren. Die Benutzererfahrung wird hierbei nicht unterbrochen.
🟢 Verwende die Button Komponente für Aktionen, wie das Absenden von Formularen.🔴 Der Tag darf nicht für Aktionen, wie das Absenden von Formularen oder Seitenwechsel verwendet werden.
Interactive Toggle Tag
Der Interactive Toggle Tag ist eine spezielle Variante des Interactive Tags. Er bildet das Verhalten einer Checkbox oder eines Radios abgebildet. Diese Tags werden als Filter eingesetzt und filtern so eine Auflistung von kategorisierten Inhalten. In diesem Fall können sie eine gute Alternative für Checkboxes oder Radio Buttons sein. Diese Tags können nicht ausgewählt (checked = false) oder ausgewählt (checked = true) sein. Wenn auf einen nicht ausgewählten Interactive Toggle Tag geklickt wird, wird dieser ausgewählt und erscheint mit farbiger Fläche.
Removable Tag
Removeable Tags können aus einer gewählten Auswahl durch Klicken auf das X wieder entfernt werden.
Einfärbung
Der adaptive Tag kann, wenn er z.B. als Kennzeichnung von verschiedenen Kategorien verwendet wird, eingefärbt werden. Dazu wird der Tag in den jeweiligen farblichen Kontext gesetzt (siehe Adaptive Coloring). Verwende dazu die im System vorhandenen zusätzlichen Farbpaletten.
Slot für individuelle Inhalte
Die Tag-Komponente ermöglicht standardmäßig die Darstellung von Text und optional einem Icon. Über den zusätzlichen Slot kann jedoch auch weiterer individueller statischer Content in den Tag integriert werden. Diese Flexibilität dient dazu, die Funktionalität der Tags zu erweitern und an spezifische Anwendungsfälle anzupassen. Es ist jedoch wichtig, sicherzustellen, dass die Inhalte innerhalb des Tags sinnvoll, benutzerfreundlich und vor allem systemkonform bleiben.
🟢 Füge kleine statische Elemente wie Icon-Kombinationen, die Divider- oder Badge-Komponente als Slot Content ein🔴 Füge keine interaktiven Komponenten oder Elemente ein, die höher als der vorgesehene Tag-Content ist.
- Konsistenz: Achte darauf, dass die Inhalte im Slot konsistent zu den restlichen Designrichtlinien der Applikation passen.
- Erkennbarkeit: Stelle sicher, dass die Inhalte klar erkennbar sind und ihre Funktion eindeutig ist.
- Barrierefreiheit: Achte darauf, dass alle zusätzlichen Inhalte barrierefrei gestaltet sind und auf die Foundation aufbauen.
Checked State
Die Property Checked State ist optional und zeigt mit Hilfe eines visuellen Indikators an, ob der Interactive Toggle Tag ausgewählt (true) oder nicht ausgewählt (false) ist. Diese Eigenschaft stellt sicher, dass Benutzer den aktuellen Zustand des Tags auf einen Blick erkennen können.Das verwendete Icon zeigt den Status des Interactive Toggle Tags an und hilft zu differenzieren, ob es sich um einen interaktiven Tag oder einen statischen Tag handelt, insbesondere wenn beide Typen zusammen in einer Anwendung angezeigt werden. Dies erhöht die Klarheit und Benutzerfreundlichkeit der Benutzeroberfläche.
Verwende das Checked State Icon zur Klarstellung des ausgewählten Zustands, wenn interaktive und statische Tags zusammen vorkommen.
In Kontexten, in denen eindeutig ist, dass es sich um einen Interactive Toggle Tag handelt, z.B. bei der Verwendung in einem Filtermechanismus, kann das Checked State Icon auch ausgeblendet werden. Dies ist besonders dann nützlich, wenn die Benutzer bereits durch das Interface oder die Umgebungslogik wissen, dass sie mit einem interaktiven Element arbeiten.Stelle dabei aber sicher, dass die Zustände für alle Nutzer verständlich und zugänglich sind, auch unter Berücksichtigung von Barrierefreiheit.
Blende das Icon aus, wenn der interaktive Kontext des Tags klar und eindeutig ist, um visuelle Unordnung zu vermeiden.
Hierarchie
Durch die Kombination der verschiedenen Emphasis des Tags wird eine klare visuelle Hierarchie geschaffen, die wichtige Informationen mit der Origin oder Strong Variante hervorhebt, während die Weak Variante dezente Unterstützung bietet, um sekundäre Daten subtil zu kennzeichnen.
🟢 Verwende beim Kombinieren die Strong Variante für wichtige Informationen und die Weak Variante für subtilere Informationen.🔴 Kombiniere Weak und Strong nicht um eine Filteroption darzustellen. Verwende dafür Interactive - Checked und Unchecked.
Label
Bei sehr langen Tags kann der Text über Overflow ausgepunktet werden. Verwende diese Variante nur in Ausnahmefällen und versuche den Inhalt des Tags so kurz und prägnant wie möglich zu halten.Tags sollten immer einzeilig bleiben. Bit
🟠 In Ausnahmefällen kann ein langes Label ausgepunktet werden. Grundsätzlich sollte der Text so kurz wie möglich gehalten werden.🔴 Breche den Text nicht um und halte den Tag einzeilig.
Tag oder Badge?
Tag und Badge haben, obwohl sie optisch ähnlich erscheinen können, unterschiedliche Bedeutungen und Anwendungen.
Tags werden verwendet, um kategorische Informationen oder Attribute darzustellen, z. B. Labels für Themen, Kategorien oder Status. Sie sind oft interaktiv und ermöglichen Filter- oder Suchfunktionen. Sie vermitteln eine Zugehörigkeit oder Klassifikation. Tags sind meist textbasiert und können auch mehrere Begriffe umfassen.
Badges zeigen kompakte, statusbezogene Informationen an, wie Zähler oder spezielle Hinweise (z. B. „neu“, „kritisch“). Sie sind nicht interaktiv. Sie fokussieren sich auf Status oder Benachrichtigungen. Badges sind kurz und prägnant (ein Wort oder Zahl).
Accessibility
Screenreader Text
Achte darauf, dass auch bei Icon Tags der Screenreader-Text immer mit an die Entwicklung übergeben wird, auch wenn es keinen visuell sichtbaren Text gibt. Ohne diese Angaben kann der Tag nicht barrierefrei genutzt werden.
Gib immer einen Text an, auch wenn er nicht sichtbar ist.
Hinweis für den interaktiven Tag (Functional)
Der interaktive Tag in der Density “Functional” hat eine Höhe von 20 px. Um Barrierefreiheitsrichtlinien zu gewährleisten, muss die Klickfläche mindestens 24 px haben. In diesem Bereich dürfen keine anderen interaktiven Elemente platziert werden. Der notwendige Bereich kann entweder durch die Größe des Elements oder aber durch entsprechenden Umraum zu anderen interaktiven Elementen erreicht werden.
🟢 Die Klickfläche von 24 px wird eingehalten.🔴 Die Klickfläche von 24 px wird durch ein anderes Element beschnitten.
Hey du! Schön, dass du hier bist. Leider sind die Informationen, die du gerade suchst, noch nicht verfügbar. Aber keine Sorge, wir arbeiten bereits daran, diese Seite mit allen wichtigen Details zu füllen. Komme gerne etwas später wieder vorbei!🙂
Du hast Fragen oder Input?
Wir haben alles dafür gegeben, dass unser Design System mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein, Fragen oder einfach nur eine gute Verbesserungsidee haben, so sind wir gerne für dich da!
E-Mail schreiben Feedback in Github
Weiter