From 7c1d063b2dfe5c225a9cef69e416ce130509201b Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Mon, 27 Apr 2026 14:43:53 +0200 Subject: [PATCH 01/19] docs(badge): web-first --- .../app/content/components/badge/no/code.mdx | 71 ++++++++++--------- 1 file changed, 39 insertions(+), 32 deletions(-) diff --git a/apps/www/app/content/components/badge/no/code.mdx b/apps/www/app/content/components/badge/no/code.mdx index 5750f9d384..dc89cc9acd 100644 --- a/apps/www/app/content/components/badge/no/code.mdx +++ b/apps/www/app/content/components/badge/no/code.mdx @@ -1,23 +1,34 @@ - + - +## 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 atributt `data-count`. -/* Inline utan tal */ - +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. -/* Inline med tal */ - +```html + + -/* Flytande over element */ - - - - + + + + + + + + ``` +## CSS variablar og data-attributtar + + + + + ## Eksempel @@ -47,29 +58,25 @@ Når du skal ha `Badge` inline, plasserer du den rett i teksten eller komponente ## HTML -`Badge` rendrar teksten sin med CSS i eit `:before`-pseudoelement på ein `span`-tagg. -Du brukar klassenavnet `ds-badge`, i saman med data atributt. -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. -```html - - - - +## React - - - - - -``` + -## CSS variablar og data-attributtar +```tsx +import { Badge } from '@digdir/designsystemet-react'; - +/* Inline utan tal */ + - +/* Inline med tal */ + + +/* Flytande over element */ + + + + +``` From e2a0dcf11dbea72e4e30f4a2f4a9c392c906a332 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 28 Apr 2026 09:45:43 +0200 Subject: [PATCH 02/19] updates to no Co-authored-by: Copilot --- .../content/components/badge/metadata.json | 4 +-- .../app/content/components/badge/no/code.mdx | 36 ++++++++----------- 2 files changed, 17 insertions(+), 23 deletions(-) diff --git a/apps/www/app/content/components/badge/metadata.json b/apps/www/app/content/components/badge/metadata.json index 2c901e76d8..4fa6d511d1 100644 --- a/apps/www/app/content/components/badge/metadata.json +++ b/apps/www/app/content/components/badge/metadata.json @@ -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" diff --git a/apps/www/app/content/components/badge/no/code.mdx b/apps/www/app/content/components/badge/no/code.mdx index dc89cc9acd..a6277e342e 100644 --- a/apps/www/app/content/components/badge/no/code.mdx +++ b/apps/www/app/content/components/badge/no/code.mdx @@ -5,39 +5,38 @@ Badge rendrar teksten sin med CSS i eit `:before`-pseudoelement på ein `span`-tagg. Du brukar klassenavnet `ds-badge`, i saman med data atributt `data-count`. -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. - ```html +``` + +Dersom du vil ha den flytande, så må `ds-badge--position` klassen 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. + +```html - - + // ikon eller anna element som badge skal plasserast over ``` -## CSS variablar og data-attributtar - - - +## CSS variabler og data-attributter -## Eksempel +Størrelser styres med [`data-size`](/no/fundamentals/code/sizes) og farger med [`data-color`](/no/fundamentals/code/colors#data-color). Komponenten vil arve nærmeste forelder med disse satt. + -### Variantar + -Du kan endre mellom `variant` og `data-color` for å få ulike fargar og stilar. - +## Eksempel ### Flytande @@ -52,19 +51,13 @@ Dette fungerer også når du bruker `overlap="circle"`. ### Inline -Når du skal ha `Badge` inline, plasserer du den rett i teksten eller komponenten. +Når du skal ha `Badge` inline, plasserer du den rett i teksten eller komponenten. Her er et eksempel på badge inline i en [tab-komponent](/no/components/docs/tabs). -## HTML - - - ## React - - ```tsx import { Badge } from '@digdir/designsystemet-react'; @@ -80,3 +73,4 @@ import { Badge } from '@digdir/designsystemet-react'; ``` + From 2ad9f9efe1534ab3326976142a2bd05c3a6e7d0b Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 28 Apr 2026 10:24:37 +0200 Subject: [PATCH 03/19] wip Co-authored-by: Copilot --- .../app/content/components/badge/en/code.mdx | 84 ++++++++++--------- .../content/components/badge/en/overview.mdx | 15 ++-- .../content/components/badge/no/overview.mdx | 14 ++-- 3 files changed, 59 insertions(+), 54 deletions(-) diff --git a/apps/www/app/content/components/badge/en/code.mdx b/apps/www/app/content/components/badge/en/code.mdx index c15e181de5..538a949d11 100644 --- a/apps/www/app/content/components/badge/en/code.mdx +++ b/apps/www/app/content/components/badge/en/code.mdx @@ -1,29 +1,42 @@ - - + -```tsx -import { Badge } from '@digdir/designsystemet-react'; +## Usage -/* Inline without numbers */ - +`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 */ - +```html + + -/* Floating over element */ - - - - + + ``` -## Examples +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. -### Variants +```html -You can switch between `variant` and `data-color` to get different colors and styles. + + + // icon or other element that the badge should be placed over + +``` + + +## CSS variables and data attributes + +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 ### Floating @@ -38,35 +51,26 @@ This also works when using `overlap="circle"`. ### Inline -To have the `Badge` inline, place it directly in the text or component. +To have the `Badge` inline, place it directly in the text or component. Here is an example of badge inline in a [tab component](/en/components/docs/tabs). -## HTML -`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. +## React -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. +```tsx +import { Badge } from '@digdir/designsystemet-react'; -```html - - +/* Inline without numbers */ + - - +/* Inline with numbers */ + - - - - - +/* Floating over element */ + + + + ``` - -## CSS variables and data attributes - - - - + diff --git a/apps/www/app/content/components/badge/en/overview.mdx b/apps/www/app/content/components/badge/en/overview.mdx index ec6290a14a..3c2b2c62fa 100644 --- a/apps/www/app/content/components/badge/en/overview.mdx +++ b/apps/www/app/content/components/badge/en/overview.mdx @@ -4,11 +4,11 @@ search_terms: notification, status, count, indicator, counter, label, tag -**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** +**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 @@ -16,31 +16,32 @@ search_terms: notification, status, count, indicator, counter, label, tag ### 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`. ### Next to text -`Badge` can be placed next to other text or components. +Badge can be placed next to other text or components. ### Floating -`Badge` can be placed floating above other elements. +Badge can be placed floating above other elements. ### 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.1 +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.1 ## 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. diff --git a/apps/www/app/content/components/badge/no/overview.mdx b/apps/www/app/content/components/badge/no/overview.mdx index a86565daf0..6d658507f3 100644 --- a/apps/www/app/content/components/badge/no/overview.mdx +++ b/apps/www/app/content/components/badge/no/overview.mdx @@ -4,11 +4,11 @@ search_terms: merkelapp, etikett, statusmerke, talmerke, tellemerke, varselsmerk -**Bruk `Badge` når** +**Bruk badge når** - det er tal som viser antall nye meldingar, varsel eller oppgåver - du skal formulere statusindikatorar i form av ein sirkel, som for eksempel viser om ein person er opptatt, borte eller aktiv -**Unngå `Badge` når** +**Unngå badge når** - det trengs tekst, bruk [`Tag`](/no/components/docs/tag/overview) i staden - det trengs interaktive handlingar, bruk [`Chip`](/no/components/docs/chip/overview) eller [`Button`](/no/components/docs/button/overview) i staden @@ -16,7 +16,7 @@ search_terms: merkelapp, etikett, statusmerke, talmerke, tellemerke, varselsmerk ### Fargar og variantar -Alle fargane som er i temaet ditt kan brukast på `Badge`. +Alle fargane som er i temaet ditt kan brukast på badge. Komponenten kjem i to variantar: `base` og `tinted`. @@ -24,23 +24,23 @@ Komponenten kjem i to variantar: `base` og `tinted`. ### Kombinasjonar -`Badge` kan plasserast ved sida av anna tekst eller komponentar. +Badge kan plasserast ved sida av anna tekst eller komponentar. ### Flytande -`Badge` kan plasserast flytande over andre element. +Badge kan plasserast flytande over andre element. ### Utan tekst inni -`Badge` kan brukast utan tekst inni, men då må han ha tilhøyrande tekst ved sidan av. Informasjon skal ikkje berre kommuniserast med farge eller form.1 +Badge kan brukast utan tekst inni, men då må han ha tilhøyrande tekst ved sidan av. Informasjon skal ikkje berre kommuniserast med farge eller form.1 ## Retningslinjer -Bruk `Badge` for å trekkje merksemd mot statusar, varslar eller tal. +Bruk badge for å trekkje merksemd mot statusar, varslar eller tal. ## Tekst Denne komponenten er ikkje meint for tekst. Viss du treng å vise ord eller korte frasar, bør du heller bruke [`Tag`](/no/components/docs/tag/overview). From 205d7cc06b924d799f6a6fbc5b270f1593254b0e Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 28 Apr 2026 10:48:40 +0200 Subject: [PATCH 04/19] update annotation --- .../app/content/components/badge/en/accessibility.mdx | 10 +++++----- .../app/content/components/badge/no/accessibility.mdx | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/www/app/content/components/badge/en/accessibility.mdx b/apps/www/app/content/components/badge/en/accessibility.mdx index 38934c0bb6..24a45fd1d4 100644 --- a/apps/www/app/content/components/badge/en/accessibility.mdx +++ b/apps/www/app/content/components/badge/en/accessibility.mdx @@ -1,8 +1,8 @@ ## 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". WCAG: [1.3.1 Info and relationships](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90) @@ -10,9 +10,9 @@ WCAG: [1.3.1 Info and relationships](https://www.uutilsynet.no/wcag-standarden/1 \ -**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`). WCAG: [1.3.1 Info and relationships](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90) @@ -20,7 +20,7 @@ WCAG: [1.3.1 Info and relationships](https://www.uutilsynet.no/wcag-standarden/1 \ -**`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** WCAG: [4.1.3 Status messages](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152) diff --git a/apps/www/app/content/components/badge/no/accessibility.mdx b/apps/www/app/content/components/badge/no/accessibility.mdx index 7269dd214f..895a76aac2 100644 --- a/apps/www/app/content/components/badge/no/accessibility.mdx +++ b/apps/www/app/content/components/badge/no/accessibility.mdx @@ -1,8 +1,8 @@ ## 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". WCAG: [1.3.1 informasjon og relasjoner](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90) @@ -10,9 +10,9 @@ WCAG: [1.3.1 informasjon og relasjoner](https://www.uutilsynet.no/wcag-standarde \ -**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`). WCAG: [1.3.1 informasjon og relasjoner](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90) @@ -20,7 +20,7 @@ WCAG: [1.3.1 informasjon og relasjoner](https://www.uutilsynet.no/wcag-standarde \ -**`Badge` som endrer verdi (for eksempel 1 → 2) skal annonseres til skjermlesere** +**Badge som endrer verdi (for eksempel 1 → 2) skal annonseres til skjermlesere** WCAG: [4.1.3 Statusbeskjeder](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152) From 90520fcb3a3e55d7c2bd85c307940152c2277e80 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 28 Apr 2026 10:50:38 +0200 Subject: [PATCH 05/19] typo --- apps/www/app/content/components/badge/en/code.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/www/app/content/components/badge/en/code.mdx b/apps/www/app/content/components/badge/en/code.mdx index 538a949d11..191cad76ba 100644 --- a/apps/www/app/content/components/badge/en/code.mdx +++ b/apps/www/app/content/components/badge/en/code.mdx @@ -2,7 +2,7 @@ ## Usage -`Badge` renders its text with CSS in a `:before` pseudo-element on a `span` tag. +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`. ```html @@ -13,7 +13,7 @@ You use the class name `ds-badge`, in conjunction with the data attribute `data- ``` -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. +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. @@ -44,14 +44,14 @@ You can set the placement with `placement`, and choose what type of `overlap` it -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. +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"`. ### Inline -To have the `Badge` inline, place it directly in the text or component. Here is an example of badge inline in a [tab component](/en/components/docs/tabs). +To have the badge inline, place it directly in the text or component. Here is an example of badge inline in a [tab component](/en/components/docs/tabs). From ac2cb3d08a65a6f88181eccdf312064a058ceb49 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 28 Apr 2026 11:51:34 +0200 Subject: [PATCH 06/19] Update apps/www/app/content/components/badge/no/code.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- apps/www/app/content/components/badge/no/code.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/components/badge/no/code.mdx b/apps/www/app/content/components/badge/no/code.mdx index a6277e342e..a1e6e86e81 100644 --- a/apps/www/app/content/components/badge/no/code.mdx +++ b/apps/www/app/content/components/badge/no/code.mdx @@ -21,7 +21,7 @@ På den kan du også setje `data-overlap="circle"` for å få sirkulær overlap. - // ikon eller anna element som badge skal plasserast over + ``` From 61ba57ebddc94fed70d8c4ab8708db5d6bd52d81 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 28 Apr 2026 11:51:50 +0200 Subject: [PATCH 07/19] Update apps/www/app/content/components/badge/no/code.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- apps/www/app/content/components/badge/no/code.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/components/badge/no/code.mdx b/apps/www/app/content/components/badge/no/code.mdx index a1e6e86e81..0803d506e8 100644 --- a/apps/www/app/content/components/badge/no/code.mdx +++ b/apps/www/app/content/components/badge/no/code.mdx @@ -3,7 +3,7 @@ ## Bruk Badge rendrar teksten sin med CSS i eit `:before`-pseudoelement på ein `span`-tagg. -Du brukar klassenavnet `ds-badge`, i saman med data atributt `data-count`. +Du brukar klassenavnet `ds-badge`, i saman med data-attributt `data-count`. ```html From 3c129d8802166bbebaa2fbe2a342689c3c281f90 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 28 Apr 2026 11:52:28 +0200 Subject: [PATCH 08/19] Update apps/www/app/content/components/badge/no/code.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- apps/www/app/content/components/badge/no/code.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/app/content/components/badge/no/code.mdx b/apps/www/app/content/components/badge/no/code.mdx index 0803d506e8..7ae1f7e547 100644 --- a/apps/www/app/content/components/badge/no/code.mdx +++ b/apps/www/app/content/components/badge/no/code.mdx @@ -14,7 +14,7 @@ Du brukar klassenavnet `ds-badge`, i saman med data-attributt `data-count`. ``` Dersom du vil ha den flytande, så må `ds-badge--position` klassen 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. +`data-placement` blir brukt på wrapperen for å bestemme plasseringa. Sjå seksjonen «CSS variabler og data-attributter» under for støtta verdiar. På den kan du også setje `data-overlap="circle"` for å få sirkulær overlap. ```html From 979217f7a4141e02137f5192cc6077f83b24aa69 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 28 Apr 2026 15:49:54 +0200 Subject: [PATCH 09/19] wip --- .../components/badge/en/accessibility.mdx | 2 +- .../app/content/components/badge/en/code.mdx | 44 +++++------------ .../content/components/badge/en/overview.mdx | 4 +- .../components/badge/no/accessibility.mdx | 2 +- .../app/content/components/badge/no/code.mdx | 47 +++++-------------- .../content/components/badge/no/overview.mdx | 4 +- 6 files changed, 29 insertions(+), 74 deletions(-) diff --git a/apps/www/app/content/components/badge/en/accessibility.mdx b/apps/www/app/content/components/badge/en/accessibility.mdx index 24a45fd1d4..95df20c56f 100644 --- a/apps/www/app/content/components/badge/en/accessibility.mdx +++ b/apps/www/app/content/components/badge/en/accessibility.mdx @@ -2,7 +2,7 @@ **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: `