Number Badge

[jeffreylauwers]

We willen graag meer leren over het Number Badge component.

• In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?
• Welke combinaties of binnen welk component wordt de Number badge gebruikt?
• Tot hoe ver tel je?
• We zijn ook benieuwd of/hoe het visueel verborgen label wordt geschreven.

Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Number Badge

Doel

Toont een klein label dat de aandacht trekt en informeert over een aantal.

Gerelateerde componenten

Data Badge, Dot Badge, Status Badge

Richtlijnen

Acceptatiecriteria: NL Design System Acceptatiecriteria voor Number Badge

Onderzoek

Adding an Item to a Shopping Cart - Nielsen Norman Group
Artikel over het geven van feedback wanneer een item aan een winkelmand is toegevoegd.

Notification badge - HMRC design resources
Onder 'Research' wordt geschreven dat gebruikers begrijpen wat het is en dat het niet voor afleiding zorgt.

[jeffreylauwers]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Figma

Ook gebruikt binnen een 'Filter button'.

---

Notities

• Wordt gezien als het Badge component met de mogelijkheid om hier enkel nummers in te tonen. Hierdoor veel opties voor kleur.

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP
• Github

---

Screenshots / Varianten

Ook gebruikt in combinatie met menu items

---

Notities

• Wordt gecombineerd met Dot badge
• Paar mooie Do's and Dont's

[jeffreylauwers]

DSO Toolkit

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

Plain

---

Notities

• Wordt gezien als het Badge component met de mogelijkheid om als 'teller' te dienen.
• In documentatie wordt enkel de plain variant getoond.
• Storybook toont opties in kleur op basis van status. In CSS classes ook als zodanig benoemd.

[jeffreylauwers]

DUO

• Documentatie website

---

Screenshots / Varianten

Notificaties
Gebruik een badge met icoon voor notificaties.

---

Notities

• Wordt gezien als het Badge component met de mogelijkheid om hier enkel nummers in te tonen. Hierdoor veel opties voor kleur.
• Opties in kleur op basis van kleur. In CSS classes ook als zodanig benoemd.
• Wordt als voorbeeld gecombineerd met een icoon waarbij de badge een rode kleur heeft.

[jeffreylauwers]

Rotterdam

• Storybook
• Figma

---

Screenshots / Varianten

Light blue

Blue

Dark blue

Green blue

Red

Dark yellow

---

Notities

• Storybook op basis van Utecht counter badge.
• Opties in kleur op basis van kleur. In CSS classes ook als zodanig benoemd.

[jeffreylauwers]

Utrecht

• Storybook
• Figma
• Github

---

Screenshots / Varianten

---

Notities

• Gedrag beschreven bij meerdere cijfers en talen.

[Robbert]

Misschien moet het doel expliciet zeggen dat het gaat om een "aantal items van een specifiek iets"

Bijvoorbeeld: "Klein label dat informeert over een aantal items in een verzameling, waarvan de verzameling wordt beschreven in een gerelateerd component"

[Robbert]

Ik stel voor om de component "Number badge" te noemen, om meer in lijn te zijn met webstandaarden. Daar komt "counter" daar niet veel in voor.

• HTML:
  • "Number" komt voor in type="number"
• JavaScript:
  • typeof count === "number"
  • new Number
  • Intl.NumberFormat
• CSS:
  • <number> type in CSS
• SVG:
  • SVGAnimatedNumber

Counter komt met name voor in CSS, voor het nummeren van lijstjes: https://developer.mozilla.org/en-US/docs/Web/CSS/counter In XSLT heb je <xsl:number> die voor aantallen weergeven is, met het count attribuut specifiek voor lijsten en hoofdstuknummers.

Qua voorspelbaarheid van namen zou het ook mooi zijn om het in lijn te brengen met toekomstige componenten, zoals:

• Number data
• Number input

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Number badge op het Community bord

[Rozerinay]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Number badge op het Candidate bord