diff --git a/docs/componenten/number-badge/_usage.md b/docs/componenten/number-badge/_usage.md
new file mode 100644
index 0000000000..6ad977ad85
--- /dev/null
+++ b/docs/componenten/number-badge/_usage.md
@@ -0,0 +1,85 @@
+# Gebruik Number Badge
+
+## CSS
+
+De CSS van deze component is gepubliceerd in een npm package:
+
+[ @nl-design-system-candidate/number-badge-css](https://www.npmjs.com/package/@nl-design-system-candidate/number-badge-css)
+versie 1.
+
+Gebruik de `nl-number-badge` class name op een `span` element:
+
+```html
+42
+```
+
+Je kunt de CSS zo in je project installeren:
+
+```sh
+npm install --save-dev @nl-design-system-candidate/number-badge-css
+```
+
+Als je een CDN gebruikt, dan kun je de CSS zo importeren:
+
+```html
+
+```
+
+Gebruik je geen CDN, dan kun je de CSS uit `node_modules/` importeren:
+
+```html
+
+```
+
+Als je CSS imports gebruikt vanuit JavaScript:
+
+```js
+import "@nl-design-system-candidate/number-badge-css/number-badge.css";
+```
+
+### Number badge als data component
+
+Je kunt er ook voor kiezen om number badge op een `data` element te gebruiken:
+
+```html
+42
+```
+
+### Number badge met een toegankelijk label
+
+Om te zorgen dat de betekenis van een number badge duidelijk is wanneer de pagina wordt voorgelezeg kun je ook een onzichtbaar label toevoegen:
+
+```html
+
+ 42
+ 42 ongelezen berichten
+
+```
+
+## React
+
+De React component is gepubliceerd in een npm package:
+
+[ @nl-design-system-candidate/number-badge-react](https://www.npmjs.com/package/@nl-design-system-candidate/number-badge-react)
+versie 1.
+
+Je kunt de npm package zo installeren:
+
+```sh
+npm install --save-dev @nl-design-system-candidate/number-badge-react
+```
+
+Je kunt de React component zo gebruiken:
+
+```jsx
+import { NumberBadge } from "@nl-design-system-candidate/number-badge-react";
+
+export const MyComponent = () => ;
+```
+
+## Figma
+
+De Figma component staat in [NL Design System Voorbeeld Bibliotheek — number-badge](https://www.figma.com/design/shhwGcqPLi2CapK0P1zz8O/NLDS---Voorbeeld---Bibliotheek?node-id=16036-18152&t=05MMm59Zv67e65gd-4).
diff --git a/docs/componenten/number-badge/index.mdx b/docs/componenten/number-badge/index.mdx
index 9dbf587d85..fe0579b55a 100644
--- a/docs/componenten/number-badge/index.mdx
+++ b/docs/componenten/number-badge/index.mdx
@@ -28,6 +28,8 @@ import {
Implementations,
Introduction,
} from "@site/src/components/ComponentPage";
+import Usage from "./_usage.md";
+import { Markdown } from "@site/src/components/Markdown";
{/* Add name and description for the component */}
export const title = "Number Badge";
@@ -44,6 +46,12 @@ export const component = componentProgress.find((item) => item.number === issueN
+## Gebruik deze component
+
+
+
+
+
## Definition of Done
@nl-design-system-candidate/number-badge-css](https://www.npmjs.com/package/@nl-design-system-candidate/number-badge-css)
+versie 1.
+
+Gebruik de `nl-number-badge` class name op een `span` element:
+
+```html
+42
+```
+
+Je kunt de CSS zo in je project installeren:
+
+```sh
+npm install --save-dev @nl-design-system-candidate/number-badge-css
+```
+
+Als je een CDN gebruikt, dan kun je de CSS zo importeren:
+
+```html
+
+```
+
+Gebruik je geen CDN, dan kun je de CSS uit `node_modules/` importeren:
+
+```html
+
+```
+
+Als je CSS imports gebruikt vanuit JavaScript:
+
+```js
+import "@nl-design-system-candidate/number-badge-css/number-badge.css";
+```
+
+### Number badge als data component
+
+Je kunt er ook voor kiezen om number badge op een `data` element te gebruiken:
+
+```html
+42
+```
+
+### Number badge met een toegankelijk label
+
+Om te zorgen dat de betekenis van een number badge duidelijk is wanneer de pagina wordt voorgelezeg kun je ook een onzichtbaar label toevoegen:
+
+```html
+
+
+ 42 ongelezen berichten
+
+```
+
+## React
+
+De React component is gepubliceerd in een npm package:
+
+[
@nl-design-system-candidate/number-badge-react](https://www.npmjs.com/package/@nl-design-system-candidate/number-badge-react)
+versie 1.
+
+Je kunt de npm package zo installeren:
+
+```sh
+npm install --save-dev @nl-design-system-candidate/number-badge-react
+```
+
+Je kunt de React component zo gebruiken:
+
+```jsx
+import { NumberBadge } from "@nl-design-system-candidate/number-badge-react";
+
+export const MyComponent = () =>