Badge
Abzeichen
Ein Abzeichen ist ein kleines, nicht anklickbares Zeichen, das an einem anderen Element befestigt ist. Es zeigt eine Zahl, einen Status oder ein kurzes Signal und ist ein Designmuster, kein Webstandard.
Ein echtes Beispiel
Ein Posteingang enthält drei ungelesene Nachrichten mit hoher Priorität. Der Posteingangstext und der zugängliche Name geben beide die Anzahl an, ohne dass das Abzeichen ein eigener Tastaturstopp wird. Eine anklickbare Filtermarkierung ist ein Chip, kein Abzeichen.
Hauptteile
- 01Host-Element
- 02kompakter Wert
- 03zugängliches Äquivalent
Verwenden Sie es, wenn
Verwenden Sie diesen Begriff für einen kleinen zusätzlichen Status oder Zähler, der an ein Hauptlabel oder Symbol angehängt ist.
Nutze es nicht, wenn
Setzen Sie keinen langen wesentlichen Text, keine Aktion oder keine Bedeutung, die nur durch Farbe angezeigt wird, in ein Abzeichen.
In Code verwendeter Name
label + noninteractive status indicator Vor dem Ausliefern
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Abzeichen (Badge). User context: Ein Posteingang enthält drei ungelesene Nachrichten mit hoher Priorität. Der Posteingangstext und der zugängliche Name geben beide die Anzahl an, ohne dass das Abzeichen ein eigener Tastaturstopp wird. Eine anklickbare Filtermarkierung ist ein Chip, kein Abzeichen. Recommended pattern: Abzeichen (Badge). Why it fits: Verwenden Sie diesen Begriff für einen kleinen zusätzlichen Status oder Zähler, der an ein Hauptlabel oder Symbol angehängt ist. Do not use it when: Setzen Sie keinen langen wesentlichen Text, keine Aktion oder keine Bedeutung, die nur durch Farbe angezeigt wird, in ein Abzeichen. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Es ist offiziell für diese Quelle. Andere Plattformen oder Teams können den Begriff auf andere Weise verwenden. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Diese Anfrage prüfen
Review how Abzeichen (Badge) is used now. Definition: Ein Abzeichen ist ein kleines, nicht anklickbares Zeichen, das an einem anderen Element befestigt ist. Es zeigt eine Zahl, einen Status oder ein kurzes Signal und ist ein Designmuster, kein Webstandard. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.