digdir · mimarz · May 5, 2026 · Apr 27, 2026 · Apr 28, 2026 · Apr 28, 2026
@@ -1,26 +1,26 @@
 ## What you need to check
 
-**`Badge` that shows important information must be included in the interactive element’s accessible name.**
+**Badge that shows important information must be included in the interactive element’s accessible name.**
 
-If `Badge` is placed inline (inside the element), the content becomes part of the accessible name. Example: `Button` with the text "Inbox" and a `Badge` with "2" will be announced as "Inbox 2".
+If badge is placed inline (inside the element), the content becomes part of the accessible name. Example: `<button>` with the text "Inbox" and a badge with "2" will be announced as "Inbox 2".
 
 <span data-size="sm"> 
 WCAG: [1.3.1 Info and relationships](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90)
 </span> 
 
 <Divider/>
 \
-**If a `Badge` is placed outside the interactive element, the badge information must be added to the element’s accessible name.**
+**If a badge is placed outside the interactive element, the badge information must be added to the element’s accessible name.**
 
-This often applies when a `Badge` is shown in the corner of a button or icon. In such cases, the badge value must be added manually to the element’s accessible name (for example via `aria-label`).
+This often applies when a badge is shown in the corner of a button or icon. In such cases, the badge value must be added manually to the element’s accessible name (for example via `aria-label`).
 
 <span data-size="sm"> 
 WCAG: [1.3.1 Info and relationships](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90)
 </span> 
 
 <Divider/>
 \
-**`Badge` that changes value (for example 1 → 2) must be announced to screen readers**
+**Badge that changes value (for example 1 → 2) must be announced to screen readers**
 
 <span data-size="sm"> 
 WCAG: [4.1.3 Status messages](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152)

@@ -1,72 +1,61 @@
-<Story story="Preview" />
-<ReactComponentDocs />
+<Story story="Preview" defaultOpen />
 
-```tsx
-import { Badge } from '@digdir/designsystemet-react';
+## Usage
 
-/* Inline without numbers */
-<Badge />
+Badge renders its text with CSS in a `:before` pseudo-element on a `span` tag.
+You use the class name `ds-badge`, in conjunction with the data attribute `data-count`.
 
-/* Inline with numbers */
-<Badge count={5} maxCount={99} />
+## CSS variables and data attributes
 
-/* Floating over element */
-<Badge.Position>
-<Badge />
-<Elem />
-</Badge.Position>
-```
+Sizes are controlled with [`data-size`](/en/fundamentals/code/sizes) and colors with [`data-color`](/en/fundamentals/code/colors#data-color). The component will inherit from the nearest parent with these set.
 
-## Examples
+<CssAttributes />
 
-### Variants
+<CssVariables />
 
-You can switch between `variant` and `data-color` to get different colors and styles.
 
-<Story story="Variants" />
+
+## Examples
+
 
 ### Floating
 
-You can set the placement with `placement`, and choose what type of `overlap` it can have.
+Not all icons have the same shape, and you may have to change where the badge should be placed. 
 
-<Story story="Floating" />
+If you want it to be floating, the class `ds-badge--position` must be used on a wrapper around the element that the badge is to be placed over.
+`data-placement` is used on the wrapper to determine the placement. See the “CSS variables and data attributes” section above for supported placements.
 
-Not all icons have the same shape, and then you may have to change where the `Badge` should be placed. If you can't get the `Badge` to be where you want it, you can use `style` to override the placement.
-This also works when using `overlap="circle"`.
 
-<Story story="CustomPlacement" />
+If you are placing the badge on a circular element, you can use `data-overlap="circle"` to get circular overlap.
 
-### Inline
+<Story story="Floating" />
 
-To have the `Badge` inline, place it directly in the text or component.
 
-<Story story="InTabsEn" />
+### Custom placement
 
-## HTML
+If you can't get the badge to be where you want it, you can use the variables `--dsc-badge-top|right|bottom|left` to override the placement.
 
-`Badge` renders its text with CSS in a `:before` pseudo-element on a `span` tag.
-You use the class name `ds-badge`, in conjunction with the data attribute.
 
-If you want it to be floating, `ds-badge--position` must be used on a wrapper around the element that the `Badge` is to be placed over.
-`data-placement` is used on the wrapper to determine the placement. See the bottom of the page for supported placements.
-You can also set `data-overlap="circle"` on it to get circular overlap.
+This also works when using `data-overlap="circle"`.
 
-```html
-<!-- inline without numbers -->
-<span class="ds-badge"></span>
+<Story story="CustomPlacement" />
 
-<!-- inline with numbers -->
-<span class="ds-badge" data-count="9+"></span>
 
-<!-- float over element -->
-<span class="ds-badge--position" data-placement="top-right" data-overlap="circle">
-<span class="ds-badge" data-count="5"></span>
-<Icon />
-</span>
-```
+## React
 
-## CSS variables and data attributes
+```tsx
+import { Badge } from '@digdir/designsystemet-react';
 
-<CssVariables />
+/* Inline without numbers */
+<Badge />
 
-<CssAttributes />
+/* Inline with numbers */
+<Badge count={5} maxCount={99} />
+
+/* Floating over element */
+<Badge.Position>
+  <Badge />
+  <Elem />
+</Badge.Position>
+```
+<ReactComponentDocs />
@@ -4,43 +4,44 @@ search_terms: notification, status, count, indicator, counter, label, tag
 
 <Story story="Preview" />
 
-**Use `Badge` when**
+**Use badge when**
 - displaying numbers that show the count of new messages, notifications or tasks
 - indicating status using a circular marker, such as showing whether a person is busy, away or active
 
-**Avoid `Badge` when**
-- text is needed, use [`Tag`](/en/components/docs/tag/overview) instead
-- interactive actions are required, use [`Chip`](/en/components/docs/chip/overview) or [`Button`](/en/components/docs/button/overview) instead
+**Avoid badge when**
+- text is needed, use [tag](/en/components/docs/tag/overview) instead
+- interactive actions are required, use [chip](/en/components/docs/chip/overview) or [button](/en/components/docs/button/overview) instead
 
 ## Examples
 
 ### Colours and variants
 
-All colours in your theme can be used with `Badge`. The component comes in two variants: `base` and `tinted`.
+All colours in your theme can be used with badge. 
+The component comes in two variants: `base` and `tinted`.
 
 <Story story="Variants" />
 
 ### Next to text
 
-`Badge` can be placed next to other text or components.
+Badge can be placed next to other text or components.
 
 <Story story="InTabs" />
 
 ### Floating
 
-`Badge` can be placed floating above other elements.
+Badge can be placed floating above other elements.
 
 <Story story="Floating" />
 
 ### Without text
 
-`Badge` can be used without text inside it, but it must then have accompanying text next to it. Information should not be communicated through colour or shape alone.<sup>1</sup>
+Badge can be used without text inside it, but it must then have accompanying text next to it. Information should not be communicated through colour or shape alone.<sup>1</sup>
 
 <Story story="Bullet" />
 
 
 ## Guidelines
-Use `Badge` to draw attention to statuses, notifications or numbers.
+Use badge to draw attention to statuses, notifications or numbers.
 
 ## Text
 This component is not intended for text. If you need to display words or short phrases, use [`Tag`](/en/components/docs/tag/overview) instead.
@@ -1,11 +1,11 @@
 {
   "no": {
     "title": "Badge",
-    "subtitle": "`Badge` er ein ikkje-interaktiv komponent som viser status med eller utan tal. Bruk [`Tag`](/no/components/docs/tag/overview) dersom du skal ha tekst i staden for tal."
+    "subtitle": "Badge er ein ikkje-interaktiv komponent som viser status med eller utan tal. Bruk [tag](/no/components/docs/tag/overview) dersom du skal ha tekst i staden for tal."
   },
   "en": {
     "title": "Badge",
-    "subtitle": "`Badge` is a non-interactive component that displays status with or without a number. Use [`Tag`](/en/components/docs/tag/overview) if you want text instead of a number."
+    "subtitle": "Badge is a non-interactive component that displays status with or without a number. Use [tag](/en/components/docs/tag/overview) if you want text instead of a number."
   },
   "image": "Badge.svg",
   "cssFile": "badge.css"

@@ -1,26 +1,26 @@
 ## Dette må du sjekke selv
 
-**`Badge` som viser viktig informasjon skal inngå i det interaktive elementets tilgjengelige navn.**
+**Badge som viser viktig informasjon skal inngå i det interaktive elementets tilgjengelige navn.**
 
-Hvis `Badge` plasseres inline (inni elementet), blir innholdet en del av det tilgjengelige navnet. Eksempel: `Button` med teksten "Innboks" og `Badge` med "2" leses opp som "Innboks 2".
+Hvis badge plasseres inline (inni elementet), blir innholdet en del av det tilgjengelige navnet. Eksempel: `<button>` med teksten "Innboks" og badge med "2" leses opp som "Innboks 2".
 
 <span data-size="sm"> 
 WCAG: [1.3.1 informasjon og relasjoner](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90)
 </span> 
 
 <Divider/>
 \
-**Hvis `Badge` er plassert utenfor det interaktive elementet, skal badge-informasjonen legges til i elementets tilgjengelige navn.**
+**Hvis badge er plassert utenfor det interaktive elementet, skal badge-informasjonen legges til i elementets tilgjengelige navn.**
 
-Dette gjelder ofte når `Badge` vises i hjørnet av en knapp eller ikon. I slike tilfeller skal badge-verdien legges til manuelt i elementets tilgjengelige navn (for eksempel via `aria-label`).
+Dette gjelder ofte når badge vises i hjørnet av en knapp eller ikon. I slike tilfeller skal badge-verdien legges til manuelt i elementets tilgjengelige navn (for eksempel via `aria-label`).
 
 <span data-size="sm"> 
 WCAG: [1.3.1 informasjon og relasjoner](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90)
 </span> 
 
 <Divider/>
 \
-**`Badge` som endrer verdi (for eksempel 1 → 2) skal annonseres til skjermlesere**
+**Badge som endrer verdi (for eksempel 1 → 2) skal annonseres til skjermlesere**
 
 <span data-size="sm"> 
 WCAG: [4.1.3 Statusbeskjeder](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152)

@@ -1,75 +1,56 @@
-<Story story="Preview" />
+<Story story="Preview" defaultOpen />
 
-<ReactComponentDocs />
+## Bruk
 
-```tsx
-import { Badge } from '@digdir/designsystemet-react';
+Badge rendrar teksten sin med CSS i eit `:before`-pseudoelement på ein `span`-tagg.
+Du brukar klassenavnet `ds-badge`, i saman med data-attributt `data-count`.
 
-/* Inline utan tal */
-<Badge />
+## CSS variabler og data-attributter
 
-/* Inline med tal */
-<Badge count={5} maxCount={99} />
+Størrelsar styrast med [`data-size`](/no/fundamentals/code/sizes) og fargar med [`data-color`](/no/fundamentals/code/colors). Komponenten vil arve næraste forelder med desse satt.
 
-/* Flytande over element */
-<Badge.Position>
-  <Badge />
-  <Elem />
-</Badge.Position>
-```
+<CssAttributes />
 
-## Eksempel
+<CssVariables />
 
 
-### Variantar
+## Eksempel
 
-Du kan endre mellom `variant` og `data-color` for å få ulike fargar og stilar.
+### Flytande
 
-<Story story="Variants" />
+Dersom du vil ha den flytande, så må `ds-badge--position` klassen nyttast på ein wrapper rundt elementet som badge skal plasserast over.
+Bruk `data-placement` på wrapperen for å bestemme plasseringa. Sjå seksjonen «CSS variabler og data-attributter» under for støtta verdiar.
 
 
-### Flytande
+Ska badge plasserast på et sirkulært element kan du også setje `data-overlap="circle"` for å få sirkulær overlap.
 
-Du kan setje plassering med `placement`, og velge kva type `overlap` den kan skal.
 
 <Story story="Floating" />
 
-Ikkje alle ikon har lik form, og då må du kanskje endre kor `Badge` skal plasserast. Dersom du ikkje får `Badge` til å liggje der du ynskjer, kan du bruke `style` for å overstyre plasseringa.
-Dette fungerer også når du bruker `overlap="circle"`.
+### Egendefinert plassering
 
-<Story story="CustomPlacement" />
+Dersom du ikkje får badge til å liggje der du ynskjer, kan du bruke variablene `--dsc-badge-top|right|bottom|left` for å overstyre plasseringa.
 
-### Inline
 
-Når du skal ha `Badge` inline, plasserer du den rett i teksten eller komponenten.
+Dette fungerer også når du bruker `data-overlap="circle"`.
 
-<Story story="InTabs" />
-
-## HTML
+<Story story="CustomPlacement" />
 
-`Badge` rendrar teksten sin med CSS i eit `:before`-pseudoelement på ein `span`-tagg.
-Du brukar klassenavnet `ds-badge`, i saman med data atributt.
+## React
 
-Dersom du vil ha den flytande, så må `ds-badge--position` nyttast på ein wrapper rundt elementet som `Badge` skal plasserast over.
-`data-placement` blir brukt på wrapperen for å bestemme plasseringa. Sjå nederst på sida for støtta plasseringar.
-På den kan du også setje `data-overlap="circle"` for å få sirkulær overlap.
+```tsx
+import { Badge } from '@digdir/designsystemet-react';
 
-```html
-<!-- inline uten tal -->
-<span class="ds-badge"></span>
+/* Inline utan tal */
+<Badge />
 
-<!-- inline med tal -->
-<span class="ds-badge" data-count="9+"></span>
+/* Inline med tal */
+<Badge count={5} maxCount={99} />
 
-<!-- flytande over element -->
-<span class="ds-badge--position" data-placement="top-right" data-overlap="circle">
-  <span class="ds-badge" data-count="5"></span>
-  <Icon />
-</span>
+/* Flytande over element */
+<Badge.Position>
+  <Badge />
+  <Elem />
+</Badge.Position>
 ```
-
-## CSS variablar og data-attributtar
-
-<CssVariables/>
-
-<CssAttributes />
+<ReactComponentDocs />