Badge, Tag & Chip – Kompakte Label-Komponenten im UI-Design

Badges, Tags und Chips sind kompakte, visuelle Label-Komponenten, die Statusinformationen anzeigen, Inhalte kategorisieren oder als interaktive Filter-Elemente dienen – je nach Variante mit unterschiedlichem Interaktionslevel.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UI-Komponenten · Niveau: Einsteiger Synonyme / Auch bekannt als: Label, Pill, Lozenge (Atlassian), Status-Badge, Filter-Tag, Chip

Was sind Badge, Tag & Chip?

Diese drei verwandten Komponenten fallen unter den Begriff Inline Labels – kleine, kompakte Informationsträger, die sich in den Fließkontext eines Interfaces einfügen, ohne viel Platz einzunehmen. Sie können statusanzeigend (Badge), kategorisierend (Tag) oder interaktiv-filternd (Chip) sein. Trotz ihrer Ähnlichkeit im Aussehen haben sie unterschiedliche semantische Rollen und Interaktionsmuster.

Erklärung

Badge

Ein Badge ist ein nicht-interaktives Statuselement. Es erscheint auf oder neben einem anderen UI-Element und kommuniziert eine Zahl, einen Status oder eine Eigenschaft.

Typen:

• Notification Badge: Zahl auf Icon (E-Mail-Zähler, Benachrichtigungen). Rotes Pill mit weißer Zahl, oben rechts am Icon.
• Status Badge: Zeigt Zustand einer Entität: „Aktiv", „Ausstehend", „Gesperrt", „Neu". Farbcodiert.
• Dot Badge: Nur ein Punkt, keine Zahl – signalisiert „etwas Neues", ohne Menge anzugeben.

Farbsemantik (Standard):

• Grün: Aktiv, Erfolgreich, Positiv
• Gelb/Orange: Ausstehend, Warnung
• Rot: Fehler, Dringend, Negativ
• Blau: Info, Primär
• Grau: Inaktiv, Neutral

Tag

Ein Tag (auch: Label, Kategorie-Label) ist ein nicht-interaktives oder leicht-interaktives Kategorisierungs-Element. Es beschriftet Inhalte mit Keywords, Kategorien oder Themen.

Einsatz: Artikelkategorien auf Blogs, Produkt-Attribute (Material, Farbe), GitHub-Repository-Topics, Jira-Labels.

Unterschied zu Badge: Tags beschreiben den Inhalt (Kategorie), Badges beschreiben den Zustand (Status).

Chip

Ein Chip ist ein interaktives Label-Element. Material Design hat diesen Begriff geprägt und definiert vier Chip-Typen:

• Input Chip: Entsteht als Ergebnis einer Nutzereingabe (z. B. E-Mail-Empfänger nach Eingabe) – hat ein X-Icon zum Entfernen
• Filter Chip: Selektierbar/deselektierbar, um Inhalte zu filtern. Hat einen Toggle-Zustand (aktiv/inaktiv) und kann Häkchen-Icon zeigen
• Suggestion Chip: Vorgeschlagene Aktionen oder Antworten, klickbar einmal
• Assist Chip: Shortcuts zu kontextuellen Aktionen

Anatomie

Alle drei Komponenten teilen ähnliche Grundstruktur:

• Container: Pill-Form (border-radius: 100px) oder leicht gerundet
• Label: Kurzer Text (1–4 Wörter ideal)
• Optional Leading Element: Farb-Dot, Icon oder Avatar
• Optional Trailing Element: X-Button (Chip), Zahl (Badge)

Größen

• Small: 16–20 px Höhe – Inline in Texten oder Tabellen
• Medium: 24 px Höhe – Standard in Listen und Cards
• Large: 32 px Höhe – Als Filter-Chips in der Suchleiste

Accessibility (WCAG 2.1)

Nicht-interaktive Badges/Tags:

• aria-label wenn Farbe die einzige Unterscheidung ist: <span aria-label="Status: Aktiv" class="badge badge-green">Aktiv</span>
• Notification Badge auf Icon: aria-label auf dem Icon-Button mit Zähler: aria-label="E-Mail, 5 neue Nachrichten"
• Farbe allein reicht nicht (WCAG 1.4.1) – immer Textlabel zusammen mit Farbe

Interaktive Chips:

• role="checkbox" für Filter-Chips mit Toggle-Verhalten, aria-checked="true/false"
• role="button" für einfache Suggestion/Assist-Chips
• Input-Chip mit Remove-Button: Remove-Button mit aria-label="[Tag-Name] entfernen"
• Mindestgröße für Touch: 44 × 44 px interaktive Fläche

Beispiele

1. GitHub – Issue Labels: Farbige Tags kategorisieren Issues (z. B. „bug" in Rot, „enhancement" in Blau, „documentation" in Grün). Klickbar als Filter. Repository-Topics unter dem Beschreibungstext sind ebenfalls Tags.
2. Gmail – Label-System: Nutzer-erstellte Label-Tags erscheinen links in der Sidebar und inline neben E-Mails als farbige Chips. Klickbar als Filter. Zeigen auch als Badges die Anzahl ungelesener Nachrichten.
3. Mobile vs. Desktop: Filter-Chips in Suchergebnis-Seiten (z. B. Google Maps, Booking.com) sind auf Mobile horizontal scrollbar als einzeilige Chip-Reihe unterhalb der Suchleiste. Touch-Targets mindestens 44 × 44 px. Desktop-Filter zeigen Chips oft als Multiline-Grid.
4. Accessibility Best Practice: Atlassian's Lozenge-Komponente (ihr Badge/Tag-Äquivalent) nutzt konsequent semantischen Text neben der Farbe und ausreichende Kontraste für alle Status-Farben – referenzierbar als WCAG-konforme Implementierung.
5. Häufiger Fehler: Farbcodierte Badges ohne Text-Label. Z. B. nur ein roter Punkt ohne Text „Fehler" – Nutzer mit Farbfehlsichtigkeit (8% der Männer) sehen nur einen grauen Punkt ohne Bedeutung. Immer Farbe + Text kombinieren.

In der Praxis

Figma: Badge/Tag/Chip als Komponenten-Familie. Basis-Chip mit Variants: Type (Badge/Tag/Filter-Chip/Input-Chip), Size (S/M/L), State (Default/Hover/Selected/Disabled), Color (Green/Yellow/Red/Blue/Gray). Boolean-Properties: hasLeadingDot, hasLeadingIcon, hasTrailingClose. Auto Layout für dynamische Breite.

HTML/CSS-Grundstruktur: ```html <!-- Status Badge (nicht-interaktiv) --> <span class="badge badge-success" aria-label="Status: Aktiv"> <span class="badge-dot" aria-hidden="true"></span> Aktiv </span>

<!-- Notification Badge auf Icon --> <button type="button" class="icon-btn" aria-label="Benachrichtigungen, 7 neue" > <svg aria-hidden="true"><!-- Bell Icon --></svg> <span class="notification-badge" aria-hidden="true">7</span> </button>

<!-- Filter Chip (interaktiv) --> <button type="button" role="checkbox" aria-checked="false" class="filter-chip" > UX Design </button>

<!-- Input Chip (entfernbar) --> <span class="input-chip"> <span>anna@beispiel.de</span> <button type="button" aria-label="anna@beispiel.de entfernen" class="chip-remove" >×</button> </span> ```

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Was ist der Unterschied zwischen einem Badge und einem Tag? Badges beschreiben den Zustand einer Entität (aktiv, gesperrt, neu, 5 Benachrichtigungen). Tags beschreiben den Inhalt oder die Kategorie (UX Design, JavaScript, Sommerkollektion). Ein Artikel kann mehrere Tags haben; ein Status-Badge eines Tickets zeigt immer nur einen aktuellen Zustand.

Wie viele Tags/Chips sollten gleichzeitig sichtbar sein? In Listenansichten: Maximal 3–5 Tags pro Element, darüber hinaus „+ n weitere" anzeigen. Bei Filter-Chips in der Suchleiste: 5–8 primäre Chips als sichtbar, Rest in einem „Mehr"-Dropdown. Zu viele Chips schaden der Übersichtlichkeit mehr als sie helfen.

Verwandte Einträge

• Avatar UI
• Button-Typen
• Dropdown & Select
• Design Tokens

Weiterführend

• Material Design 3 – Chips: m3.material.io/components/chips
• Atlassian Design System – Lozenge: atlassian.design/components/lozenge
• Nielsen Norman Group – „Status Label Design": nngroup.com
• WCAG 2.1 – SC 1.4.1 Use of Color: w3.org/WAI/WCAG21/Understanding/use-of-color