FigmaOpenCode

Badge

Synonyme: Hinweis, Plakette, Kennzeichen
Ähnliche Komponenten: Alert, Chips, Toast

Kurzbeschreibung

Ein Badge gibt einen knappen Status-Hinweis zu einem übergeordneten Element.

Beispiele

Default Badge

Code anzeigen

<span class="kern-badge kern-badge--info">
<span class="kern-badge__title">Info</span>
</span>

Varianten

Code anzeigen

<span class="kern-badge kern-badge--info">
<span class="kern-badge__title">Info</span>
</span>
<span class="kern-badge kern-badge--success">
<span class="kern-badge__title">Success</span>
</span>
<span class="kern-badge kern-badge--warning">
<span class="kern-badge__title">Warning</span>
</span>
<span class="kern-badge kern-badge--danger">
<span class="kern-badge__title">Danger</span>
</span>

Badge Icon

Im Badge-Komponenten-Design wird das Attribut aria-hidden="true" standardmäßig auf das Icon gesetzt, da der Text des Badges in den meisten Fällen ausreichend aussagekräftig ist. Das Icon fungiert hier nur als visuelles Schmuckelement, das den Inhalt unterstützt, aber keine zusätzliche Bedeutung trägt.

Sollte das Icon jedoch in bestimmten Fällen für Screenreader zugänglich sein, kann aria-hidden auf "false" gesetzt und zusätzlich ein aria-label hinzugefügt werden. Dies ermöglicht es Screenreadern, das Icon zu erfassen und seinen Zweck den Nutzer*innen klar zu vermitteln.

Mehr Infos: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden

Code anzeigen

<span class="kern-badge kern-badge--success">
<span class="kern-icon kern-icon--success" aria-hidden="true"></span>
<span class="kern-badge__title">Success</span>
</span>

<span class="kern-badge kern-badge--info">
<span class="kern-icon kern-icon--info" aria-hidden="true"></span>
<span class="kern-badge__title">Info</span>
</span>

<span class="kern-badge kern-badge--warning">
<span class="kern-icon kern-icon--warning" aria-hidden="true"></span>
<span class="kern-badge__title">Warning</span>
</span>

<span class="kern-badge kern-badge--danger">
<span class="kern-icon kern-icon--danger" aria-hidden="true"></span>
<span class="kern-badge__title">Danger</span>
</span>

Beschreibung

Mit einem Badge kannst Du einen kompakten Status-Hinweis zu einem übergeordneten Element geben. Es zeigt beispielsweise an, ob ein Antrag erfolgreich übertragen wurde, ob er sich in Bearbeitung befindet oder ob Probleme dabei aufgetreten sind. Ein Badge besteht aus einem Icon und einem beschreibenden – idealerweise sehr kurzen aber dennoch präzisen – Begriff als Label. Steht nur wenig Raum zur Verfügung, kann das Icon weggelassen werden, sofern die Aussage erhalten bleibt. Badges sind nicht interaktiv. Um unmittelbares Feedback auf eine vorangegangene Aktion zu geben, verwende die Komponente „Alert“. Wir unterscheiden vier verschiedene Zustände, die farblich fest kodiert sind: Info (blau), Success (grün), Warning (gelb) und Danger (rot). Zu den Einsatzzwecken lies bitte bei den Verwendungsregeln weiter.

Verwendungsregeln

Badges weisen den Status eines Elements nur sehr stark verkürzt aus. Nutze Badges, um Nutzer*innen eine erste Orientierung zu vorangegangenen Aktionen zu geben. Die kompakte Form eignet sich vor allem für Übersichten, in denen der Status verschiedener Prozesse kurzgefasst und auf einen Blick erkennbar dargestellt werden soll. Signalisiere mit Badges, ob weitere Aktionen seitens des Nutzenden erforderlich sind. Biete den Nutzenden zusätzlich zum Badge die Möglichkeit, das Element genauer und detaillierter einzusehen oder zu bearbeiten.

Information, blau

Einfache Status-Information: Das Element befindet sich in einem stabilen Zustand, der aktuell von keiner Seite beeinflusst oder verändert wird. Es besteht kein Handlungsbedarf.

Erfolgreich, grün

Das Success-Badge kennzeichnet einen geschlossenen Zustand und kann in zwei Weisen angewandt werden:

1. Es veranschaulicht, dass eine Aktion erfolgreich ausgeführt, ein vorangegangener Prozess erfolgreich durchlaufen wurde oder einzugebende Daten vollständig vorliegen. Eine weitere Aktion seitens des Nutzenden ist nicht erforderlich. Umgangssprachlich wäre hier „Alles im grünen Bereich“.
2. Die Voraussetzungen für einen Prozess oder eine Aktion sind erfüllt, der bzw. die nun gestartet werden kann. Umgangssprachlich bekäme man hier „grünes Licht“.

Warnung, gelb

Das Warning-Badge signalisiert einen offenen Zustand, der die Aufmerksamkeit des Nutzenden oder eine Aktion erforderlich macht. Das Warning-Badge kann daher auf zwei Weisen angewandt werden:

1. Kenntnisnahme: Kennzeichnung eines in Bearbeitung oder Veränderung befindlichen Zustands, beispielsweise dass ein Prozess läuft.
2. Eine Aktion ist erforderlich: ein Prozess kann nicht gestartet oder abgeschlossen werden, Daten liegen nicht vollständig vor. Aus dem Kontext muss sich ergeben, ob hier lediglich die Kenntnisnahme gewünscht ist, oder ob eine Aktion seitens des Nutzenden erforderlich ist.

Fehler, rot

Das Danger-Badge signalisiert, dass von Seiten des Nutzenden eine Aktion oder Reaktion erforderlich ist. Insbesondere bei diesem Status ist eine Verlinkung des betreffenden Elements auf weitere Erläuterungen wichtig. Erkläre, welche Aktion von dem/der Nutzer:in möglich oder erforderlich ist.

Dos und Don’ts

Sorge dafür, dass Badges keine anderen Elemente überdecken.

Verändere nicht das Farbschema.

Ein Objekt soll nicht mehrere Status aufweisen.

Weitere Hinweise

• Minimiere das Badge bei geringem Platzangebot auf das Label oder auf das Icon, wenn die Aussage damit erhalten bleibt.
• Komplexere Status-Hinweise lassen sich besser mit der Alert/Notification/Toast-Komponenten kommunizieren.

Barrierefreiheit

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße, Kontrastverhältnis – für barrierefreie Dienste.

• Achte in der Umsetzung darauf, dass Label auch für Menschen mit kognitiven Beeinträchtigungen verständlich sind.

Siehe auch: w3.org - Alert Pattern, w3.org - Alert and Message Dialogs Pattern oder magentaA11y