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 Badges fest. Mit den Werten Weak (Standard) und Strong kann die Bedeutung oder Hervorhebung des Inhalts gesteuert werden.
Semantic
Die Semantic-Property bestimmt die semantische Bedeutung und visuelle Darstellung des Badges. 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.
Size
Die Size-Property legt die Größe des Badges fest. Es stehen die Optionen Small (Standard) und Medium zur Verfügung, die je nach Kontext und Layout ausgewählt werden können.
Content
Die Content-Property bestimmt die Darstellungsform der Informationen im Badge. Es stehen die Optionen Text (Standard), Dot und Icon zur Auswahl.
Placement
Die Position-Property legt die Platzierung des Badges relativ zum Bezugselement fest. Bei Inline (Standard) wird der Badge innerhalb des Bezugselements positioniert. Die Corner-Optionen erlauben eine Platzierung an verschiedenen Ecken oder seitlichen Positionen, wie Top-Left, Center-Left, Bottom-Left, Top-Right, Center-Right und Bottom-Right, typischerweise für die Dot- oder Icon-Variante.
Examples
Boxmodel
Das Boxmodel definiert den Aufbau einer Komponente. Es nutzt die unten genannten Tokens, um Konsistenz und Skalierbarkeit zu gewährleisten.
Token
(Default) Medium | Small | Note | |
|---|---|---|---|
Size | db-sizing-fixed-2xs | db-sizing-fixed-3xs | Content Dot only |
Padding-Full | db-spacing-fixed-2xs | db-spacing-fixed-3xs | Content Dot only |
Padding-H | db-spacing-fixed-xs | db-spacing-fixed-2xs | |
Border Radius | db-radius-full | db-radius-full | |
Icon Size | db-base-icon-font-size-sm | db-base-icon-font-size-2xs | |
Text Size | db-type-body-font-size-sm | db-type-body-font-size-2xs |
Kurz, Knackig, Klar
Setze die Badge-Komponente ein, wenn
- Statusindikatoren angezeigt werden sollen, um Elemente als „neu“, „aktiv“ oder „offline“ zu markieren.
- Zähler erforderlich sind, um die Anzahl ungelesener Nachrichten, Benachrichtigungen oder Aufgaben anzuzeigen.
- wichtige Hinweise auf besondere Informationen oder Aktionen hinweisen, z. B. „verfügbar“ oder „ausverkauft“.
- kontextuelle Markierungen spezifische Elemente in Listen oder Menüs hervorheben sollen.
Guidelines to Go
- Label
- kurze und prägenante Begriffe (ein bis zwei Worte oder Zahlen)
- bei großen Zahlen (dreistellig): "99+", 0 wird nicht angezeig
- Positionierung
- absolut an den 4 Ecken oder 2 Seiten oder inline
- keine visuelle Kollisionen mit anderen Elementen
- Tag: Für Kategorien oder Attribute; meist interaktiv (Filter/Suche), längere Begriffe möglich
- Badge: Für statusbezogene Infos wie Zähler oder Hinweise (z. B. „neu“); nicht interaktiv, fokussiert auf Status/Besonderheiten
Label Text
Der Text im Badge sollte möglichst kurz und prägnant sein, da der Platz begrenzt ist. Ein bis zwei Worte oder Zahlen eignen sich am besten. Verwende konsistente Begriffe oder Bezeichnungen im Badge-Text, um Verwirrung zu vermeiden. Die gewählten Begriffe sollten den Kontext klar vermitteln.
Wenn der Badge Zahlen anzeigt, sollte das Format verständlich sein, z. B. „99+“ für größere Mengen, um Platz zu sparen. Vermeide bei Badges, die absolut zum Element positioniert, sind (längere) Textinhalte.Wenn die Anzahl gleich “0” ist, zeige keinen Badge an.
🟢 Halte das Label kurz und prägnant. Verwende Ziffern und Mengenangaben bei absolut positionierten Badges.🔴 Vermeide Textinhalte und lange Labels bei absolut positionierten Badges.
Positionierung
Der Badge kann entweder absolut an den 4 Ecken bzw. 2 Seiten (links + rechts) eines Elements platziert werden oder inline innerhalb eines Elements stehen. Bei der absoluten Positionierung behält der Badge bei einer horizontalen Verbreiterung die Position bei.
🟢 Den Text oder Icon Badge kannst du Inline oder an den Ecken (Corner) positionieren.🟢 Positioniere den Badge Dot nur an den Ecken (Corner).🔴 Positioniere den Badge Dot nicht Inline.
Nutze den großen Badge wenn genug Platz ist und platziere ihn am Ende einer Komponente, um visuelle Kollisionen zu vermeiden.
Achte darauf, dass du innerhalb eines Anwendungsbereiches nicht unterschiedliche Positionierungen verwendest. Der Badge soll nicht abgeschnitten werden oder mit einem anderen Element kollidieren. Beschränke in solchen Fällen die Länge der Inhalte oder wähle die kleinere Größe.
🟢 Nutze bei begrenztem Platz die Small Variante und halte die Länge des Labels kurz.🔴 Achte darauf, den Badge im Layout nicht abzuschneiden oder mit anderen Elementen zu überlagern.
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 Badge 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.
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