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.
(Default) Outlined, Filled, Ghost, Brand | |
(Default) False, True | |
(Default) Medium, Small | |
(Default) False, True | |
(Default) False, True | |
(Default) False, True | |
(Default) Auto, Full |
Variant
Die Variant-Property definiert das visuelle Erscheinungsbild des Buttons. Es umfasst verschiedene Stile wie Brand für hervorgehobene CTAs, Outlined als Default-Button, gefolgt vom Filled und Ghost-Button für dezente, oftmals alternative Interaktionen.
Disabled
Die Disabled-Property legt fest, ob der Button aktiv oder inaktiv ist. Bei Disabled = False ist der Button interaktiv und unterstützt Zustände wie Hover, Pressed und Focused. Wenn Disabled = True gesetzt ist, wird der Button inaktiv und zeigt keine interaktiven Zustände mehr. In diesem Fall ist er nicht klickbar.
Size
Die Size-Property bestimmt die physikalische Größe des Buttons. Hierbei kann zwischen Medium als Default-Größe für vielseitige Anwendungen und Small als kompakterer Button für begrenzten Platz oder spezielle Anforderungen gewählt werden.
Show Icon Leading
Die Show-Icon-Leading Property legt fest, ob ein Icon vor dem Text im Button angezeigt wird. Wenn die Property auf True gesetzt ist, wird ein Icon dargestellt. Der Standardwert ist False, bei dem kein Icon angezeigt wird.
Show Icon Trailing
Die Show-Icon-Trailing Property legt fest, ob ein Icon nach dem Text im Button 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.
Width
Die Width-Property beeinflusst das dynamische Verhalten des Buttons. Auto sorgt dafür, dass die Breite automatisch dem Inhalt angepasst wird, während Full den Button über die gesamte verfügbare Breite erstreckt.
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 | |
|---|---|---|
Size | db-sizing-fixed-md | db-sizing-fixed-sm |
Padding-Full | db-spacing-fixed-xs | db-spacing-fixed-3xs |
Padding-H | db-spacing-fixed-md | db-spacing-fixed-sm |
Spacing | db-spacing-fixed-xs | db-spacing-fixed-2xs |
Border Radius | db-radius-xs | db-radius-xs |
Border Height | db-border-height-3xs | db-border-height-3xs |
Icon Size | db-base-icon-font-size-md | db-base-icon-font-size-sm |
Text Size | db-type-body-md-bold | db-type-body-sm-bold |
Unterschied zu v2
- Kompatibilität mit dem adaptiven Farb- und Größensystem
- Aufbau mit Spacing- und Typo-Token
- Einsatz der Icons v3
- Neue Varianten-Struktur und Namings
- Primary Brand ➔ Brand
- Secondary Outlined ➔ Outlined
- Secondary Solid ➔ Filled
- Tertiary ➔ Ghost
- Primary (dunkel) ist in der v3 nicht mehr vorhanden. Für Produkte, die rot als Signalfarbe einsetzen und aus sicherheitsrechtlichen Gründen den roten Brand Button nicht verwenden dürfen, wird eine Alternative bereitgestellt. Bitte nicht den Brand Button umfärben.
Kurz, Knackig, Klar
Setze die Button-Komponente ein, wenn
- eine Aktion ausgelöst werden soll, z. B. „Senden“, „Speichern“ oder „Löschen“.
- eine Aufgabe oder ein Dialog gestartet werden soll
- Nutzer klar erkennen sollen, dass eine Interaktion oder Bestätigung erwartet wird.
- Du eine primäre oder sekundäre Aktion visuell hervorheben möchtest.
Guidelines to Go
- Brand-Button:
- stärkster Call-to-Action (CTA), leitet zur Conversion.
- idealerweise nur einmal pro Viewport verwenden.
- Outlined-Button:
- mittelstarke Hervorhebung für wichtige, aber nicht primäre Aktionen.
- gut kombinierbar als sekundäre Aktionen mit Brand-Button.
- Label soll einzeilig, kurz und prägnant sein und eine klare Handlungsaufforderung vermitteln.
- Icons sollen Intuitiv und allgemein verständlich sein.
- Button für Aktionen und Links für Navigation verwenden.
- Gebe beim Icon Button immer einen Screenreader Text an
Hierarchie
Lege eine klare Hierarchie für Buttons fest, um visuell und funktional zu zeigen, welche Aktionen priorisiert sind. Beachten dabei die Wichtigkeit der Aktionen und deren Relevanz für den Nutzerkontext.
Outlined Buttons
Outlined Buttons sind mittelstark hervorgehobene Buttons. Sie beinhalten wichtige Aktionen, die jedoch nicht die primäre Aktion in der Anwendung darstellen. Sie lassen sich gut mit dem Brand-Button kombinieren, um eine alternative, sekundäre Aktion anzuzeigen.
🟢 Aktionen sind priorisiert: Brand-Button und Outlined-Button🔴 Aktionen sind nicht priorisiert: Zwei Brand-Buttons gleichzeitig
Brand Button
Der Brand Button ist der stärkste CTA und soll die Nutzer:innen zum Conversion Target leiten. Aus diesem Grund verwenden wir ihn im besten Fall nur einmal pro Viewport.
🟢 Ein Brand-Button pro Viewport🔴 Mehrere Brand-Buttons pro Viewport
Kombinationsmöglichkeiten
Die verschiedenen Buttons können unterschiedlich miteinander kombiniert werden.
(1) Bei Kombinationen mit dem Brand-Button steht dieser im Mittelpunkt, während Outlined, Filled oder Ghost-Buttons unterstützende oder sekundäre Aktionen markieren.
(2) Bei Kombinationen mit Outlined-Buttons eignen sich für wichtige, aber nicht primäre Aktionen. In Kombination mit Filled oder Ghost entsteht eine klare visuelle Abstufung zwischen den Aktionen. Filled-Buttons sind visuell stärker, Ghost-Buttons dezent. Zusammen bieten sie eine flexible Möglichkeit, Aktionen unterschiedlich zu gewichten.(3) Outlined-Buttons nebeneinander bieten eine gleichwertige Darstellung für wichtige, aber nicht primäre Aktionen. Filled-Buttons zusammen heben Aktionen moderat hervor, ohne visuell zu dominant zu wirken. Ghost-Buttons nebeneinander schaffen eine dezente, unaufdringliche Option für gleichrangige, weniger zentrale Aktionen.
Label
Halte das Label des Buttons kurz und prägnant, um eine klare und verständliche Handlungsaufforderung zu gewährleisten.
Labeltexte in Auto Width Buttons sind immer einzeilig und sollten kurz gehalten werden. Breche den Text nicht manuell um.
🟢 Labeltexte sind standardmäßig immer einzeilig🔴 Labeltext soll nicht manuell umgebrochen werden
Wird der Text innerhalb des FullWidth Buttons länger, als die Breite ermöglicht, kann der Text mehrzeilig werden. Dies sollte durch kurze Labeltexte grundsätzlich vermieden werden und ist nur für Ausnahmefällen, wie der Verlängerung des Textes durch Übersetzung der Sprache oder Verkleinerung der Screenbreite, angedacht.
🟢 Bei Verkleinerung der Screenbreite und Sprachänderung kann der Full Width Button mehrzeilig werden, um den gesamten Labeltext anzuzeigen.🔴 Mehrzeiligkeit sollte nicht für lange, komplizierte Labeltexte verwendet werden.
Icons
Die verwendeten Icons in den Buttons sollten intuitiv und allgemein verständlich sein (z. B. ein Papierkorb für "Löschen" oder ein Stiftsymbol für "Bearbeiten"). Unklare oder komplexe Icons können Verwirrung stiften.
Icon Button
Reine Icon-Buttons eignen sich besonders gut für Toolbars, Navigationsleisten und mobile Interfaces, wo eine klare und kompakte Darstellung von Aktionen wichtig ist.
Icon-Buttons sollten im Hover-Zustand einen Tooltip mit der auszulösenden Aktion anzeigen.
Zeige für den Icon-Button im Hover-State einen Tooltip an
(Icon-) Buttons können durch Badges ergänzt werden, um z.B. Benachrichtigungen oder Änderungen anzuzeigen. Guidelines zur Platzierung sind in der Badge Dokumentation zu finden.
Je nach Anwendungsfall können Buttons entweder ein Leading Icon oder ein Trailing Icon beinhalten. Die Kombination beider sollte vermieden werden, um die Übersicht zu bewahren und eine intuitive Nutzererfahrung sicherzustellen.
🟢 Nutze Leading- und Trailing Icons als sinnvolle Ergänzung für die jeweilige Aktion.🔴 Verwende innerhalb eines Buttons keine zwei Icons.
Positionierung
Vermeide es, Buttons untereinander zu platzieren wenn genügend Platz für eine horizontale Darstellung gegeben ist.
🟢 Buttons nebeneinander🔴 Buttons untereinander
Breite
Der Standard-Button passt sich in der Breite dem Inhalt an (Auto Width). Wenn du Buttons in responsiven Layouts einsetzt, können diese auch die Breite des Containers einnehmen. Insbesondere in Mobile-Layouts werden die Full Width-Buttons verwendet. Die Button-Breite kann nie kleiner als der Inhalt sein.
🟢 Button Breite entspricht dem Inhalt (Auto Width)🟢 Button Breite entspricht dem Container (Full Width)🔴 Inhalt ist breiter als Button
Button oder Link?
Nutze Buttons, um Aktionen auszulösen, allerdings nicht, um auf andere Seiten zu leiten – dafür werden Links verwendet.
Accessibility
Kontrastwerte
Um die WCAG-Richtlinien zu erfüllen, muss der Text eines Buttons ein Kontrastverhältnis von 4,5:1, Icons ein Kontrastverhältnis von 3:1 gegenüber ihrem Hintergrund in allen interaktiven Zuständen aufweisen. Disabled Buttons sind nicht interaktiv und müssen keine Farbkontrastanforderungen erfüllen. Die Nutzung der Komponenten des DB UX Design Systems gewährleistet die Erfüllung der WCAG-Richtlinien.
Screenreader Text
Achte darauf, dass auch bei Icon Button 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 Button Small (Functional)
Der Button "Small" in der Density “Functional” hat eine Höhe von 20 px. Um Barrierefreiheitsrichtlinien zu gewährleisten, muss die Klickfläche jedoch mindestens 24 px haben. In diesem Bereich dürfen keine weitere interaktive 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 (hier relevant).
🟢 Die Klickfläche von 24 px wird eingehalten.🔴 Die Klickfläche von 24 px wird durch ein anderes Element beschnitten.
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