Data Badge

[jeffreylauwers]

We willen graag meer leren over de Data badge component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook, Github of screenshots. Met deze informatie kunnen we bewijzen dat de 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

Data Badge

Doel

Label met extra informatie, zoals een categorie of een eigenschap.

Gerelateerde componenten

Dot Badge, Number Badge, Status Badge

Onderzoek

Rapport Generieke Services 2023 - Gemeente Den Haag (PDF, 9 MB)
Uit dit gebruikersonderzoek blijkt dat de Data Badge heel goed werkt. Het wordt makkelijker begrepen dan het gebruik van enkel iconen.

Onderzoek Generieke Services - Miro
Miro board dat is gebruikt tijdens het gebruikersonderzoek waarin inzichten te vinden zijn over de Data Badge.

Interaction Design Foundation - Preattentive Visual Properties
Artikel dat beschrijft dat door preattentieve verwerking bepaalde visuele eigenschappen zoals kleur, vorm en grootte snel worden waargenomen, wat belangrijk is voor de effectiviteit van Badges.

[Rozerinay]

Amsterdam

• Storybook
• Figma
• Github

---

Screenshots / Varianten

Storybook

Figma

---

Notities

• Onder de naam: Badge.
• Beschikbaar in 14 kleuren.
• Label kan een string of number zijn.
• Er worden nog richtlijnen bedacht omtrent het kleurgebruik.
• Documentatie beschikbaar (Figma).

[Rozerinay]

DSO Toolkit

• Documentatie website
• Storybook
• Github

---

Screenshots / Varianten

Storybook
Default

Truncate

With action

With symbol color

With symbol image

---

Notities

• Onder de naam: Label.
• Kan verschillende statussen bevatten, namelijk: primary, succes, info, warning, danger, bright, error en attention.
• Niet zichtbaar of dit ook kan worden ingezet met 'data', zoals een datum.
• Kan een icoon of symbool bevatten.
• Documentatie beschikbaar (documentatiewebsite).

[Rozerinay]

Rotterdam

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Default

Badge as link

Light blue

Blue

Dark blue

Green blue

Red

Dark yellow

---

Notities

• Onder de naam: 'Data badge' in Storybook en 'Badge' in Figma.
• Niet zichtbaar of dit ook kan worden ingezet met 'data', zoals een datum. Label kan in ieder geval alleen een string zijn.
• Beschikbaar in 8 kleuren.
• Mogelijkheid om de badge aan te kunnen klikken (Badge as link).

[Rozerinay]

Utrecht

• Storybook
• Github

---

Screenshots / Varianten

Storybook

Default

Machine-readable value

Machine-readable date

Machine-readable date and time

Machine-readable duration

---

Notities

• Naam wordt nog gewijzigd van Badge data naar Data badge.
• Beschikbaar in 1 kleur.
• Weergeeft onder andere tijdsgegevens en datums.
• Technische documentatie beschikbaar (Storybook).

[Rozerinay]

DUO

Documentatie website

---

Screenshots / Varianten

Documentatie website

Met achtergrond
Gebruik een badge met achtergrondkleur als je een specifieke status, een label of een bericht wilt communiceren. De achtergrondkleur van de badge trekt de aandacht en kan helpen om belangrijke informatie op te laten vallen. Bijvoorbeeld, een groene badge met de tekst "Goedgekeurd".

Omlijnd
Gebruik een badge zonder achtergrondkleur als de content minder belangrijk is voor de actie of informatiebehoefte van de gebruiker, bijvoorbeeld bij rentepercentages.

Transparant
Gebruik een transparante grote badge voor datums en bestandsnamen.

---

Notities

• Onder de naam: Badge.
• Beschikbaar in verschillende varianten.
• Zowel de variant die de status weergeeft als de variant die data presenteert, zijn samengebracht in 1 Badge component.
• Documentatie beschikbaar (documentatie website).

[Rozerinay]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Data Badge op het Community bord