diff --git a/.changeset/tag-data-status.md b/.changeset/tag-data-status.md
new file mode 100644
index 00000000..71d1ae64
--- /dev/null
+++ b/.changeset/tag-data-status.md
@@ -0,0 +1,6 @@
+---
+"@sb1/indeks-css": minor
+"@sb1/indeks-react": minor
+---
+
+Tag er redesignet til å bruke `data-status`-farge-kaskaden (samme mønster som Message, ProgressBar m.fl.) i stedet for BEM-modifikatorer. Farge velges nå med `data-status` (`neutral | info | success | warning | danger`), visuell profil med `data-variant` (`emphasis | subtle`) og størrelse med `data-size` (`sm | lg`). I React er dette henholdsvis `variant`-, `type`- og `size`-props. Emphasis bruker invers tekst på mettet flate; subtle bruker mørk tekst på pastell-flate med farget border — begge profiler verifisert mot WCAG 1.4.3 (4.5:1). Tag er nå polymorf via `as`-prop (Aksel `OverridableComponent`-mønster) slik at den kan rendres som f.eks. `<a>` eller `<button>` ved behov.
diff --git a/indeks-css/css/components/tag.css b/indeks-css/css/components/tag.css
index 00e56b05..a7e0c4b0 100644
--- a/indeks-css/css/components/tag.css
+++ b/indeks-css/css/components/tag.css
@@ -1,83 +1,65 @@
+/* Tag — liten visuell etikett med semantisk status-farge.
+ *
+ * Farge kobles via `data-status` (info/success/warning/danger/neutral) som
+ * hekter seg på status-farge-kaskaden i @sb1/indeks-utils/css/status-colors.css
+ * — samme mønster som Message, ProgressBar m.fl. Kaskaden gir automatisk
+ * --ix-color-status-fill (mettet), --ix-color-status-fill-subtle (pastell) og
+ * --ix-color-status-border. Uten `data-status` faller kaskaden til nøytral.
+ *
+ * `data-variant` velger visuell profil:
+ *   emphasis (default) → mettet flate + invers (hvit) tekst
+ *   subtle             → pastell-flate + farget tekst + border
+ *
+ * Ingen web component: Tag er en ren etikett uten atferd, så rotselektoren
+ * treffer kun klassen (.ix-tag) — det finnes ingen <ix-tag>-tag i DOM.
+ */
 :where(.ix-tag) {
-    --background-color: var(--ix-color-fill-neutral-default);
-    --text-color: var(--ix-color-foreground-main-default);
-    --border-color: var(--ix-color-border-main-default);
+    /* Lokale variabler går igjen på flate, tekst og border på tvers av
+       variant-reglene under — derfor lokale props, ikke direkte tokens. */
+    --ix-tag-background: var(--ix-color-status-fill);
+    --ix-tag-color: var(--ix-color-foreground-inverse-default);
+    --ix-tag-border-color: transparent;
 
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: var(--ix-spacing-2xs) var(--ix-spacing-sm);
-    gap: var(--ix-spacing-2xs);
-    border-radius: var(--ix-border-radius-sm);
-    font-size: var(--ix-font-size-md);
     width: fit-content;
-    background-color: var(--background-color);
-    color: var(--text-color);
     height: fit-content;
-    border: var(--ix-border-width-default) solid var(--border-color);
-}
-
-:where(.ix-tag[data-size="sm"]) {
-    font-size: var(--ix-font-size-sm);
-}
-
-:where(.ix-tag[data-size="lg"]) {
-    font-size: var(--ix-font-size-lg);
-}
-
-:where(.ix-tag .ix-icon) {
-    color: var(--text-color);
-}
-
-:where(.ix-tag--info-emphasis) {
-    --background-color: var(--ix-color-fill-info-default);
-    --text-color: var(--ix-color-foreground-inverse-default);
-    --border-color: var(--ix-color-border-info-default);
-}
-
-:where(.ix-tag--info-subtle) {
-    --background-color: var(--ix-color-fill-info-subtle);
-    --border-color: var(--ix-color-border-info-default);
-}
-
-:where(.ix-tag--success-emphasis) {
-    --background-color: var(--ix-color-fill-success-default);
-    --text-color: var(--ix-color-foreground-inverse-default);
-    --border-color: var(--ix-color-border-success-default);
-}
-
-:where(.ix-tag--success-subtle) {
-    --background-color: var(--ix-color-fill-success-subtle);
-    --border-color: var(--ix-color-border-success-default);
-}
-
-:where(.ix-tag--warning-emphasis) {
-    --background-color: var(--ix-color-fill-warning-default);
-    --text-color: var(--ix-color-foreground-inverse-default);
-    --border-color: var(--ix-color-border-warning-default);
-}
-
-:where(.ix-tag--warning-subtle) {
-    --background-color: var(--ix-color-fill-warning-subtle);
-    --border-color: var(--ix-color-border-warning-default);
+    gap: var(--ix-spacing-2xs);
+    padding: var(--ix-spacing-2xs) var(--ix-spacing-sm);
+    font-size: var(--ix-font-size-md);
+    color: var(--ix-tag-color);
+    background-color: var(--ix-tag-background);
+    border: var(--ix-border-width-default) solid var(--ix-tag-border-color);
+    border-radius: var(--ix-border-radius-sm);
 }
 
-:where(.ix-tag--danger-emphasis) {
-    --background-color: var(--ix-color-fill-danger-default);
-    --text-color: var(--ix-color-foreground-inverse-default);
-    --border-color: var(--ix-color-border-danger-default);
+/* Ikon arver tekstfargen (både emphasis-invers og subtle-farget). */
+:where(.ix-tag .ix-icon),
+:where(.ix-tag ix-icon) {
+    color: var(--ix-tag-color);
 }
 
-:where(.ix-tag--danger-subtle) {
-    --background-color: var(--ix-color-fill-danger-subtle);
-    --border-color: var(--ix-color-border-danger-default);
+:where(.ix-tag[data-size='sm']) {
+    font-size: var(--ix-font-size-sm);
 }
 
-:where(.ix-tag--neutral-emphasis) {
-    --background-color: var(--ix-color-fill-neutral-default);
-    --text-color: var(--ix-color-foreground-inverse-default);
+:where(.ix-tag[data-size='lg']) {
+    font-size: var(--ix-font-size-lg);
 }
 
-:where(.ix-tag--neutral-subtle) {
-    --background-color: var(--ix-color-fill-neutral-subtle);
+/* ── Subtle: pastell-flate, farget border, mørk tekst ─────────────────────
+ *
+ * Fargen bæres av flate (--ix-color-status-fill-subtle) og border
+ * (--ix-color-status-border). Teksten er mørk main-tekst i ALLE statuser.
+ *
+ * Hvorfor ikke farget tekst (som i designskissen): token-systemet har ingen
+ * per-status foreground mørk nok til å nå WCAG 1.4.3 (4.5:1) på de lyse
+ * subtle-flatene. Målt mot ekte token-verdier gir en mettet per-status-farge
+ * kun 1.5–4.5:1 (info faller helt til 1.48:1). Mørk main-tekst gir 10.8–13.2:1
+ * på alle subtle-flater — trygt og konsistent. Se accessibility/tag.json. */
+:where(.ix-tag[data-variant='subtle']) {
+    --ix-tag-background: var(--ix-color-status-fill-subtle);
+    --ix-tag-color: var(--ix-color-foreground-main-default);
+    --ix-tag-border-color: var(--ix-color-status-border);
 }
diff --git a/indeks-docs/docs/komponenter/accessibility/tag.json b/indeks-docs/docs/komponenter/accessibility/tag.json
new file mode 100644
index 00000000..4b4e3459
--- /dev/null
+++ b/indeks-docs/docs/komponenter/accessibility/tag.json
@@ -0,0 +1,92 @@
+{
+  "component": "Tag",
+  "lastReviewed": "2026-07-28",
+  "consumerResponsibilities": [
+    {
+      "summary": "Ikke stol på farge alene for å formidle status",
+      "details": "Tag-varianten (info, success, warning, danger) endrer kun farge. Fargen alene formidler ikke betydning til brukere med nedsatt fargesyn eller skjermlesere. Teksten i taggen må selv bære betydningen — skriv «Utløpt» eller «Godkjent», ikke bare en rød eller grønn tag uten forklarende tekst.",
+      "wcag": ["1.4.1"]
+    },
+    {
+      "summary": "Skriv meningsfull tekst i taggen",
+      "details": "Taggen har ingen automatisk tilgjengelig navn utover tekstinnholdet. Innholdet leses av skjermleser som vanlig tekst, uten noen rolle-annonsering. Bruk kort, beskrivende tekst på brukerens språk (bokmål, nynorsk eller engelsk). Komponenten har ingen hardkodet tekst.",
+      "wcag": ["1.3.1"]
+    },
+    {
+      "summary": "Ikoner i taggen er dekorative — merk dem som skjult",
+      "details": "Et ikon i taggen skal støtte teksten, ikke erstatte den. Sett aria-hidden=\"true\" på <ix-icon> slik at skjermleser ikke leser ikonet. Er ikonet det eneste innholdet (ingen tekst), er taggen meningsløs for skjermlesere — legg alltid til synlig eller skjult tekst.",
+      "wcag": ["1.1.1"]
+    },
+    {
+      "summary": "Sett riktig rolle/semantikk hvis taggen er interaktiv",
+      "details": "Tag er som standard en ikke-interaktiv <span>. Gjør du taggen til en lenke eller knapp via as=\"a\"/as=\"button\", er du selv ansvarlig for meningsfull lenketekst, href eller onClick, og at fokus- og tastaturatferd gir mening i konteksten.",
+      "wcag": ["4.1.2", "2.4.4"]
+    }
+  ],
+  "handled": [
+    { "id": "1.3.1", "notes": "Tekstinnholdet følger naturlig leserekkefølge i DOM. Ingen skjult struktur som må formidles." },
+    { "id": "1.3.2", "notes": "Innhold (ikon + tekst) følger naturlig og meningsfull sekvens i DOM." },
+    { "id": "1.4.1", "notes": "Status kommuniseres av tekstinnhold i tillegg til farge — komponenten legger ikke opp til farge alene, men teksten er konsumentens ansvar." },
+    { "id": "1.4.3", "notes": "Emphasis bruker invers (lys) tekst mot mettet flate (4.8–5.5:1). Subtle bruker mørk main-tekst mot pastell-flate i alle statuser (10.8–13.2:1); fargen bæres av flate og border. Farget tekst per status ble vurdert, men token-systemet har ingen per-status foreground mørk nok til å nå 4.5:1 på de lyse subtle-flatene (info ville falt til 1.48:1), så mørk tekst er brukt." },
+    { "id": "1.4.4", "notes": "Størrelser bruker relative font-size-tokens og skalerer korrekt ved 200 % zoom." },
+    { "id": "1.4.10", "notes": "Taggen er width: fit-content uten fast bredde og reflower korrekt ned til 320 px viewport." },
+    { "id": "1.4.11", "notes": "Emphasis-flaten oppfyller 3:1 komponentavgrensning mot lys sidebakgrunn (5.0–5.8:1 mot hvit). Subtle-varianten er bevisst rolig: pastell-flate (1.4–1.7:1) og border (2.2–2.5:1) når ikke 3:1 mot en lys side, men taggen er ikke-interaktiv og all betydning bæres av teksten (1.4.1) med 10.8–13.1:1 — avgrensningen er dekorativ, så 1.4.11 stiller ikke krav til den." },
+    { "id": "1.3.4", "notes": "Ingen fast orientering — taggen fungerer i både portrett og landskap." }
+  ],
+  "issues": [],
+  "notRelevant": [
+    { "id": "1.1.1", "reason": "Taggen har ikke ikke-tekstlig innhold i seg selv; ikon-barn er dekorativt og skjules av konsumenten med aria-hidden." },
+    { "id": "1.2.1" },
+    { "id": "1.2.2" },
+    { "id": "1.2.3" },
+    { "id": "1.2.4" },
+    { "id": "1.2.5" },
+    { "id": "1.3.3", "reason": "Taggen formidler ikke instruksjoner." },
+    { "id": "1.3.5", "reason": "Ikke et skjemafelt som ber om personlig informasjon." },
+    { "id": "1.4.2" },
+    { "id": "1.4.5" },
+    { "id": "1.4.12" },
+    { "id": "1.4.13", "reason": "Taggen viser ikke innhold ved hover/fokus." },
+    { "id": "2.1.1", "reason": "Standard-taggen er ikke-interaktiv. Interaktiv bruk (as=\"a\"/\"button\") arver native tastaturstøtte." },
+    { "id": "2.1.2" },
+    { "id": "2.1.4" },
+    { "id": "2.2.1" },
+    { "id": "2.2.2" },
+    { "id": "2.3.1" },
+    { "id": "2.4.1" },
+    { "id": "2.4.2" },
+    { "id": "2.4.3", "reason": "Ikke-interaktiv — ikke i tab-rekkefølgen." },
+    { "id": "2.4.4", "reason": "Kun relevant hvis konsumenten gjør taggen til en lenke — da er lenketekst konsumentens ansvar." },
+    { "id": "2.4.5" },
+    { "id": "2.4.6" },
+    { "id": "2.4.7", "reason": "Standard-taggen er ikke fokuserbar. Interaktiv bruk arver native :focus-visible." },
+    { "id": "2.4.11" },
+    { "id": "2.5.1" },
+    { "id": "2.5.2" },
+    { "id": "2.5.4" },
+    { "id": "2.5.6" },
+    { "id": "2.5.7" },
+    { "id": "2.5.8", "reason": "Ikke-interaktiv — intet klikkmål-krav. Interaktiv bruk må selv sikre 24×24 px." },
+    { "id": "3.1.1" },
+    { "id": "3.1.2" },
+    { "id": "3.2.1", "reason": "Ikke-interaktiv — ingen kontekstendring ved fokus." },
+    { "id": "3.2.2" },
+    { "id": "3.2.3" },
+    { "id": "3.2.4" },
+    { "id": "3.2.6" },
+    { "id": "3.3.1" },
+    { "id": "3.3.2" },
+    { "id": "3.3.3" },
+    { "id": "3.3.4" },
+    { "id": "3.3.7" },
+    { "id": "3.3.8" },
+    { "id": "4.1.2", "reason": "Standard-taggen er ren tekst uten interaktiv rolle. Interaktiv bruk (as=\"a\"/\"button\") gir native rolle." },
+    { "id": "4.1.3", "reason": "Taggen genererer ingen statusmeldinger — den er statisk innhold." }
+  ],
+  "keyboard": [],
+  "screenReader": [
+    "Ikke-interaktiv tag: leses som vanlig tekst i lesekontekst — «[tekst]», uten rolle-annonsering.",
+    "Ikon i taggen leses ikke når det har aria-hidden=\"true\".",
+    "Interaktiv tag (as=\"a\"/\"button\"): annonseres med native rolle — «[tekst], lenke» eller «[tekst], knapp»."
+  ]
+}
diff --git a/indeks-docs/docs/komponenter/tag.mdx b/indeks-docs/docs/komponenter/tag.mdx
new file mode 100644
index 00000000..7585d171
--- /dev/null
+++ b/indeks-docs/docs/komponenter/tag.mdx
@@ -0,0 +1,250 @@
+---
+title: Tag
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import AccessibilityTable, { KeyboardAndScreenReader } from '@site/src/components/AccessibilityTable';
+import a11yData from './accessibility/tag.json';
+
+# Tag
+
+:::info TODO — diskusjon: farget subtle-tekst per status
+
+Etter Figma-designet skal subtle-varianten ha _farget_ tekst per status (blå på
+lyseblå, grønn på lysegrønn osv.). Implementasjonen bruker i stedet mørk tekst i
+alle subtle-statuser: de mettede fyll-fargene (`-550`) gir kun 3.3–3.9:1 mot
+pastell-flatene og bryter WCAG 1.4.3 (4.5:1), og systemet mangler
+foreground-tokens for `info`, `warning` og `neutral` (kun `success`/`danger`
+finnes). En mørkere per-status foreground (~`-700`, 7–11:1) ville latt oss matche
+Figma WCAG-trygt. Avventer beslutning om å legge til de manglende tokenene — se
+[Status-foreground i fargedokumentasjonen](/docs/retningslinjer/farger/#status).
+
+Et designsystem som gjør nettopp dette:
+[Digdir Designsystemet — Tag](https://storybook.designsystemet.no/?path=/docs/komponenter-tag--docs)
+bruker `data-color` med tonet flate og mørkere tekst i samme fargetone per status
+(og en `outline`-variant for enda roligere uttrykk).
+
+:::
+
+Tag er en liten, ikke-interaktiv etikett som merker eller kategoriserer innhold — for eksempel en status, en egenskap eller et nøkkelord. Taggen bærer betydningen i teksten sin, og fargen støtter opp om hvilken type informasjon det er.
+
+## Egnet til
+
+- Vise status på et element (f.eks. «Utløpt», «Ny», «Til behandling»)
+- Merke eller kategorisere innhold med korte nøkkelord
+- Fremheve en egenskap eller et attributt kompakt
+- Gi et visuelt hint om alvorlighetsgrad sammen med tekst
+
+## Uegnet til
+
+- Handlinger brukeren kan klikke på — bruk [Chip](./chip) eller [Button](./button)
+- Fjernbare valg eller filtre — bruk [Removable chip](./chip/removable)
+- Lange tekster eller forklaringer — taggen er ment for korte etiketter
+- Å formidle status med farge alene uten forklarende tekst
+
+## Varianter
+
+Taggen har fem semantiske statuser — `neutral`, `info`, `success`, `warning` og `danger` — i to visuelle profiler:
+
+- **Emphasis** (standard): mettet flate med invers (lys) tekst. Brukes når taggen skal trekke blikket.
+- **Subtle**: pastell-flate med mørk tekst og farget border. Roligere uttrykk som passer i tettpakket innhold.
+
+I HTML velges status med `data-status`, profil med `data-variant` og størrelse med `data-size`. I React er dette henholdsvis `variant`-, `type`- og `size`-props.
+
+## Eksempel
+
+<Tabs groupId="variant">
+<TabItem value="html" label="HTML">
+
+```jsx live
+<span class="ix-tag" data-status="info" data-variant="emphasis">Ny</span>
+```
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```tsx live
+<Tag variant="info">Ny</Tag>
+```
+
+</TabItem>
+</Tabs>
+
+### Alle statuser
+
+Hver status finnes i begge profiler. Emphasis øverst, subtle under.
+
+<Tabs groupId="variant">
+<TabItem value="html" label="HTML">
+
+```jsx live
+<ix-stack gap="md">
+  <ix-stack horizontal gap="sm">
+    <span class="ix-tag" data-status="neutral" data-variant="emphasis">Neutral</span>
+    <span class="ix-tag" data-status="info" data-variant="emphasis">Info</span>
+    <span class="ix-tag" data-status="success" data-variant="emphasis">Success</span>
+    <span class="ix-tag" data-status="warning" data-variant="emphasis">Warning</span>
+    <span class="ix-tag" data-status="danger" data-variant="emphasis">Danger</span>
+  </ix-stack>
+  <ix-stack horizontal gap="sm">
+    <span class="ix-tag" data-status="neutral" data-variant="subtle">Neutral</span>
+    <span class="ix-tag" data-status="info" data-variant="subtle">Info</span>
+    <span class="ix-tag" data-status="success" data-variant="subtle">Success</span>
+    <span class="ix-tag" data-status="warning" data-variant="subtle">Warning</span>
+    <span class="ix-tag" data-status="danger" data-variant="subtle">Danger</span>
+  </ix-stack>
+</ix-stack>
+```
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```tsx live
+<VStack gap="md">
+  <HStack gap="sm">
+    <Tag variant="neutral">Neutral</Tag>
+    <Tag variant="info">Info</Tag>
+    <Tag variant="success">Success</Tag>
+    <Tag variant="warning">Warning</Tag>
+    <Tag variant="danger">Danger</Tag>
+  </HStack>
+  <HStack gap="sm">
+    <Tag variant="neutral" type="subtle">Neutral</Tag>
+    <Tag variant="info" type="subtle">Info</Tag>
+    <Tag variant="success" type="subtle">Success</Tag>
+    <Tag variant="warning" type="subtle">Warning</Tag>
+    <Tag variant="danger" type="subtle">Danger</Tag>
+  </HStack>
+</VStack>
+```
+
+</TabItem>
+</Tabs>
+
+### Subtle-profil
+
+<Tabs groupId="variant">
+<TabItem value="html" label="HTML">
+
+```jsx live
+<span class="ix-tag" data-status="success" data-variant="subtle">Godkjent</span>
+```
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```tsx live
+<Tag variant="success" type="subtle">Godkjent</Tag>
+```
+
+</TabItem>
+</Tabs>
+
+### Med ikon
+
+Ikonet er dekorativt og skal støtte teksten, ikke erstatte den. Merk `<ix-icon>` med `aria-hidden="true"` slik at skjermleser ikke leser det.
+
+<Tabs groupId="variant">
+<TabItem value="html" label="HTML">
+
+```jsx live
+<span class="ix-tag" data-status="warning" data-variant="subtle">
+  <ix-icon name="home" aria-hidden="true" class="ix-icon"></ix-icon>
+  Bolig
+</span>
+```
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```tsx live
+<Tag variant="warning" type="subtle">
+  <Icon name="home" size="sm" />
+  Bolig
+</Tag>
+```
+
+</TabItem>
+</Tabs>
+
+### Størrelser
+
+<Tabs groupId="variant">
+<TabItem value="html" label="HTML">
+
+```jsx live
+<ix-stack horizontal gap="sm">
+  <span class="ix-tag" data-status="info" data-size="sm">Liten</span>
+  <span class="ix-tag" data-status="info">Standard</span>
+  <span class="ix-tag" data-status="info" data-size="lg">Stor</span>
+</ix-stack>
+```
+
+</TabItem>
+<TabItem value="react" label="React">
+
+```tsx live
+<HStack gap="sm">
+  <Tag variant="info" size="sm">Liten</Tag>
+  <Tag variant="info">Standard</Tag>
+  <Tag variant="info" size="lg">Stor</Tag>
+</HStack>
+```
+
+</TabItem>
+</Tabs>
+
+## Props
+
+Props-dokumentasjonen genereres automatisk fra Storybook.
+
+## Tilpasning med CSS
+
+Trenger du `ix-tag`-stylingen på HTML du setter sammen selv — uten React-komponenten — kan du bruke klassen direkte på elementet ditt. Farge kobles via `data-status`, som setter status-farge-variablene (`--ix-color-status-*`) automatisk, på samme måte som i Message.
+
+### Tilgjengelige klasser og attributter
+
+| Element/tilstand | Selektor / attributt |
+|------------------|----------------------|
+| Tag | `.ix-tag` |
+| Status (farge) | `data-status="neutral \| info \| success \| warning \| danger"` |
+| Visuell profil | `data-variant="emphasis \| subtle"` |
+| Størrelse | `data-size="sm \| lg"` (utelates for standard `md`) |
+| Ikon | `.ix-tag .ix-icon` / `.ix-tag ix-icon` (arver tekstfarge) |
+
+### Eksempel: bruk i egen HTML-struktur
+
+```html
+<span class="ix-tag" data-status="danger" data-variant="subtle" data-size="sm">
+  <ix-icon name="warning" aria-hidden="true" class="ix-icon"></ix-icon>
+  Utløpt
+</span>
+```
+
+## Universell utforming
+
+### Hva du selv må sørge for
+
+- **Ikke formidle status med farge alene.** Skriv betydningen i teksten — «Utløpt», «Godkjent» — ikke bare en rød eller grønn tag (WCAG 1.4.1).
+- **Skriv kort, meningsfull tekst** på brukerens språk. Taggen har ingen hardkodet tekst, og innholdet leses som vanlig tekst uten rolle-annonsering.
+- **Merk ikoner som dekorative** med `aria-hidden="true"`. Et ikon uten tekst gjør taggen meningsløs for skjermlesere.
+- **Gjør du taggen interaktiv** med `as="a"` eller `as="button"`, er du selv ansvarlig for meningsfull lenketekst/handling og at fokus- og tastaturatferd gir mening.
+
+### Hva komponenten gjør automatisk
+
+- Velger tekstfarge mot bakgrunnen i hver variant slik at kontrasten når 4.5:1: emphasis bruker lys tekst mot mettet flate, subtle bruker mørk tekst mot pastell-flate.
+- Reflower korrekt ned til 320 px viewport — taggen har ingen fast bredde.
+- Kobler status-farge-variablene automatisk via `data-status`.
+
+<KeyboardAndScreenReader data={a11yData} />
+
+### WCAG-kriterier
+
+<AccessibilityTable data={a11yData} />
+
+## Relatert
+
+- [Chip](./chip) — for interaktive valg og handlinger
+- [Message](./message) — for statusmeldinger med mer innhold
+- [Button](./button) — for handlinger
diff --git a/indeks-docs/sidebars.ts b/indeks-docs/sidebars.ts
index 7bb41f5b..68dd8fb2 100644
--- a/indeks-docs/sidebars.ts
+++ b/indeks-docs/sidebars.ts
@@ -154,6 +154,7 @@ const sidebars: SidebarsConfig = {
                 'komponenter/modal',
                 'komponenter/read-more',
                 'komponenter/tabs',
+                'komponenter/tag',
                 {
                     type: 'category',
                     label: 'Skjema',
diff --git a/indeks-react/lib/ui/components/tag/Tag.test.ts b/indeks-react/lib/ui/components/tag/Tag.test.ts
deleted file mode 100644
index d543b94d..00000000
--- a/indeks-react/lib/ui/components/tag/Tag.test.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { expect, test } from "vitest";
-
-test('placeholder', () => {
-    expect(true).toBe(true);
-});
\ No newline at end of file
diff --git a/indeks-react/lib/ui/components/tag/Tag.test.tsx b/indeks-react/lib/ui/components/tag/Tag.test.tsx
new file mode 100644
index 00000000..5499d510
--- /dev/null
+++ b/indeks-react/lib/ui/components/tag/Tag.test.tsx
@@ -0,0 +1,87 @@
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { describe, expect, it } from 'vitest';
+import { Tag } from './Tag';
+
+describe('Tag', () => {
+    it('rendrer som span med ix-tag-klasse og innhold', () => {
+        render(<Tag>Label</Tag>);
+        const tag = screen.getByText('Label');
+        expect(tag.tagName).toBe('SPAN');
+        expect(tag.classList.contains('ix-tag')).toBe(true);
+    });
+
+    it('setter default data-status og data-variant', () => {
+        render(<Tag>Label</Tag>);
+        const tag = screen.getByText('Label');
+        expect(tag.getAttribute('data-status')).toBe('neutral');
+        expect(tag.getAttribute('data-variant')).toBe('emphasis');
+    });
+
+    it('mapper variant til data-status', () => {
+        render(<Tag variant="info">Label</Tag>);
+        expect(screen.getByText('Label').getAttribute('data-status')).toBe('info');
+    });
+
+    it('mapper type til data-variant', () => {
+        render(<Tag type="subtle">Label</Tag>);
+        expect(screen.getByText('Label').getAttribute('data-variant')).toBe('subtle');
+    });
+
+    it('utelater data-size for default-størrelse md', () => {
+        render(<Tag>Label</Tag>);
+        expect(screen.getByText('Label').hasAttribute('data-size')).toBe(false);
+    });
+
+    it('setter data-size for sm og lg', () => {
+        const { rerender } = render(<Tag size="sm">Label</Tag>);
+        expect(screen.getByText('Label').getAttribute('data-size')).toBe('sm');
+        rerender(<Tag size="lg">Label</Tag>);
+        expect(screen.getByText('Label').getAttribute('data-size')).toBe('lg');
+    });
+
+    it('sender className videre til rot-elementet', () => {
+        render(<Tag className="custom">Label</Tag>);
+        expect(screen.getByText('Label').classList.contains('custom')).toBe(true);
+    });
+
+    it('videresender native attributter som id og aria-label', () => {
+        render(
+            <Tag id="min-tag" aria-label="Beskrivelse">
+                Label
+            </Tag>,
+        );
+        const tag = screen.getByText('Label');
+        expect(tag.getAttribute('id')).toBe('min-tag');
+        expect(tag.getAttribute('aria-label')).toBe('Beskrivelse');
+    });
+
+    it('rendrer som annet element via as-prop', () => {
+        render(
+            <Tag as="a" href="/side">
+                Lenke-tag
+            </Tag>,
+        );
+        const tag = screen.getByText('Lenke-tag');
+        expect(tag.tagName).toBe('A');
+        expect(tag.getAttribute('href')).toBe('/side');
+    });
+
+    it('forwarder ref til rot-elementet', () => {
+        const ref = createRef<HTMLSpanElement>();
+        render(<Tag ref={ref}>Label</Tag>);
+        expect(ref.current).toBeInstanceOf(HTMLSpanElement);
+        expect(ref.current?.textContent).toBe('Label');
+    });
+
+    it('rendrer children inkludert ikon-elementer', () => {
+        render(
+            <Tag>
+                <span data-testid="ikon" />
+                Pålogget
+            </Tag>,
+        );
+        expect(screen.getByTestId('ikon')).toBeTruthy();
+        expect(screen.getByText('Pålogget')).toBeTruthy();
+    });
+});
diff --git a/indeks-react/lib/ui/components/tag/Tag.tsx b/indeks-react/lib/ui/components/tag/Tag.tsx
index 85f9efe6..8cebbd42 100644
--- a/indeks-react/lib/ui/components/tag/Tag.tsx
+++ b/indeks-react/lib/ui/components/tag/Tag.tsx
@@ -1,35 +1,58 @@
 import { cn } from '../../../cn';
-import type { ComponentPropsWithoutRef, ElementType, JSX, ReactNode } from 'react';
-import type { ComponentSize } from '../../../types/types';
+import { forwardRef } from 'react';
+import type {
+    ComponentPropsWithRef,
+    ElementType,
+    FC,
+    HTMLAttributes,
+    JSX,
+    ReactNode,
+    RefAttributes,
+} from 'react';
 
-export type TagVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export type TagVariant = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
 
-export type TagProps<As extends ElementType> = {
-    as?: As;
-    children?: ReactNode;
-    className?: string;
+// Flat interface som extender HTMLAttributes — ikke generisk, ikke type-alias
+// med `&`. Begge deler bryter react-docgen-typescript (tom Storybook Controls).
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Semantisk status som styrer farge. Settes som `data-status` og kobler
+     *  status-farge-kaskaden. @default "neutral" */
     variant?: TagVariant;
-    size?: ComponentSize;
+    /** Visuell profil. `emphasis` = mettet flate + hvit tekst, `subtle` =
+     *  pastell-flate + farget tekst. @default "emphasis" */
     type?: 'emphasis' | 'subtle';
-} & ComponentPropsWithoutRef<As>;
+    /** @default "md" */
+    size?: 'sm' | 'md' | 'lg';
+    children?: ReactNode;
+    /** Render som annet element, f.eks. "a" eller "button". @default "span" */
+    as?: ElementType;
+}
 
-export function Tag<As extends ElementType = 'span'>(props: TagProps<As>): JSX.Element {
-    const {
-        as: Component = 'span',
-        className,
-        variant = 'neutral',
-        type = 'emphasis',
-        size = 'md',
-        ...restProps
-    } = {
-        ...props,
-    };
+interface OverridableComponent<Component, Element extends HTMLElement> {
+    (props: Component & RefAttributes<Element>): ReturnType<FC>;
+    <As extends ElementType>(
+        props: { as: As } & Component & Omit<ComponentPropsWithRef<As>, keyof Component | 'as'>,
+    ): ReturnType<FC>;
+}
 
+export const Tag: OverridableComponent<TagProps, HTMLSpanElement> = forwardRef<
+    HTMLSpanElement,
+    TagProps
+>(function Tag(
+    { as, children, variant = 'neutral', type = 'emphasis', size = 'md', className, ...rest },
+    ref,
+): JSX.Element {
+    const Component = (as ?? 'span') as ElementType;
     return (
         <Component
-            {...restProps}
-            data-size={size}
-            className={cn('ix-tag', `ix-tag--${variant}-${type}`, className)}
-        />
+            ref={ref}
+            className={cn('ix-tag', className)}
+            data-status={variant}
+            data-variant={type}
+            data-size={size !== 'md' ? size : undefined}
+            {...rest}
+        >
+            {children}
+        </Component>
     );
-}
+});
diff --git a/indeks-storybook/stories/components/tag/Tag.mdx b/indeks-storybook/stories/components/tag/Tag.mdx
deleted file mode 100644
index f38865f3..00000000
--- a/indeks-storybook/stories/components/tag/Tag.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Canvas, Controls, Meta } from "@storybook/addon-docs/blocks";
-import { HStack, VStack, Tag } from "@sb1/indeks-react";
-
-import * as TagStories from './Tag.stories';
-
-<Meta title="Components/Tag" />
-
-# Tag
-
-Eksempel på tag med forskjellige størrelser og moduser.
-
-<div className="ix-body sb-unstyled">
-  <HStack>
-    <VStack>
-      <Tag size="sm" data-density="compact" variant="info" type="subtle" children="Compact / sm" />
-      <Tag size="md" data-density="compact" variant="info" type="subtle" children="Compact / md" />
-      <Tag size="lg" data-density="compact" variant="info" type="subtle" children="Compact / lg" />
-    </VStack>
-    <VStack>
-      <Tag size="sm" data-density="default" variant="info" type="subtle" children="Default / sm" />
-      <Tag size="md" data-density="default" variant="info" type="subtle" children="Default / md" />
-      <Tag size="lg" data-density="default" variant="info" type="subtle" children="Default / lg" />
-    </VStack>
-    <VStack>
-      <Tag size="sm" data-density="comfortable" variant="info" type="subtle" children="Comfortable / sm" />
-      <Tag size="md" data-density="comfortable" variant="info" type="subtle" children="Comfortable / md" />
-      <Tag size="lg" data-density="comfortable" variant="info" type="subtle" children="Comfortable / lg" />
-    </VStack>
-  </HStack>
-</div>
diff --git a/indeks-storybook/stories/components/tag/Tag.stories.tsx b/indeks-storybook/stories/components/tag/Tag.stories.tsx
index 9e833acf..ed4d426c 100644
--- a/indeks-storybook/stories/components/tag/Tag.stories.tsx
+++ b/indeks-storybook/stories/components/tag/Tag.stories.tsx
@@ -1,11 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Icon, Tag } from '@sb1/indeks-react';
+import { HStack, Icon, Tag, VStack } from '@sb1/indeks-react';
 
 const meta = {
     title: 'Components/Tag',
     component: Tag,
-    args: { children: 'Tekst' },
+    tags: ['autodocs'],
+    args: {
+        children: 'Label',
+        variant: 'neutral',
+        type: 'emphasis',
+        size: 'md',
+    },
 } satisfies Meta<typeof Tag>;
 
 export default meta;
@@ -13,15 +19,84 @@ type Story = StoryObj<typeof meta>;
 
 export const Standard: Story = {};
 
-export const WithIcon: Story = {
-    args: {},
-    name: 'Med ikon',
-    render: (args) => {
+export const Info: Story = {
+    args: { variant: 'info' },
+};
+
+export const Success: Story = {
+    args: { variant: 'success' },
+};
+
+export const Warning: Story = {
+    args: { variant: 'warning' },
+};
+
+export const Danger: Story = {
+    args: { variant: 'danger' },
+};
+
+export const Subtle: Story = {
+    args: { variant: 'info', type: 'subtle' },
+};
+
+export const MedVenstreIkon: Story = {
+    name: 'Med venstre ikon',
+    render: (args) => (
+        <Tag {...args}>
+            <Icon size="sm" name="home" />
+            Label
+        </Tag>
+    ),
+};
+
+export const MedHoyreIkon: Story = {
+    name: 'Med høyre ikon',
+    render: (args) => (
+        <Tag {...args}>
+            Label
+            <Icon size="sm" name="home" />
+        </Tag>
+    ),
+};
+
+/** Alle statuser × emphasis/subtle, i standardstørrelse. */
+export const Oversikt: Story = {
+    render: () => {
+        const statuses = ['neutral', 'info', 'success', 'warning', 'danger'] as const;
         return (
-            <Tag {...args}>
-                <Icon size="sm" name="savings" />
-                Pålogget
-            </Tag>
+            <VStack gap="lg">
+                {(['emphasis', 'subtle'] as const).map((type) => (
+                    <HStack key={type} gap="sm">
+                        {statuses.map((variant) => (
+                            <Tag key={variant} variant={variant} type={type}>
+                                Label
+                            </Tag>
+                        ))}
+                    </HStack>
+                ))}
+            </VStack>
         );
     },
 };
+
+/**
+ * Ren HTML uten React-wrapper. Status velges med `data-status` (kobler
+ * fargevariablene automatisk), profil med `data-variant`, størrelse med
+ * `data-size`. Ikon skrives som `<ix-icon>` med `class="ix-icon"`.
+ */
+export const HTML: Story = {
+    render: () => (
+        <HStack gap="sm">
+            <span className="ix-tag" data-status="info" data-variant="emphasis">
+                Label
+            </span>
+            <span className="ix-tag" data-status="info" data-variant="subtle">
+                <ix-icon name="home" aria-hidden="true" class="ix-icon" />
+                Label
+            </span>
+            <span className="ix-tag" data-status="danger" data-variant="subtle" data-size="sm">
+                Label
+            </span>
+        </HStack>
+    ),
+};
diff --git a/indeks-storybook/tests/scanAll.dtest.ts b/indeks-storybook/tests/scanAll.dtest.ts
index 59abc676..b54db8ef 100644
--- a/indeks-storybook/tests/scanAll.dtest.ts
+++ b/indeks-storybook/tests/scanAll.dtest.ts
@@ -24,6 +24,7 @@ const ALLOWED_STORY_TITLES: string[] = [
   'Components/ProgressBar',
   'Components/Spinner',
   'Components/Tabs',
+  'Components/Tag',
   'Layout/Grid',
   'Layout/HStack',
   'Layout/VStack',
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Danger-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Danger-1-desktop-firefox-linux.png
new file mode 100644
index 00000000..eff2c203
Binary files /dev/null and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Danger-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-HTML-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-HTML-1-mobile-chromium-linux.png
new file mode 100644
index 00000000..de54e65f
Binary files /dev/null and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-HTML-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Info-1-mobile-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Info-1-mobile-webkit-linux.png
new file mode 100644
index 00000000..ea8246d0
Binary files /dev/null and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Info-1-mobile-webkit-linux.png differ
diff --git "a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Med-h\303\270yre-ikon-1-desktop-firefox-linux.png" "b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Med-h\303\270yre-ikon-1-desktop-firefox-linux.png"
new file mode 100644
index 00000000..1cff2d1f
Binary files /dev/null and "b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Med-h\303\270yre-ikon-1-desktop-firefox-linux.png" differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Med-venstre-ikon-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Med-venstre-ikon-1-desktop-webkit-linux.png
new file mode 100644
index 00000000..0784ce71
Binary files /dev/null and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Med-venstre-ikon-1-desktop-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Oversikt-1-desktop-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Oversikt-1-desktop-chromium-linux.png
new file mode 100644
index 00000000..a03f4303
Binary files /dev/null and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Oversikt-1-desktop-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Standard-1-mobile-chromium-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Standard-1-mobile-chromium-linux.png
new file mode 100644
index 00000000..5cb71b8a
Binary files /dev/null and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Standard-1-mobile-chromium-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Subtle-1-desktop-firefox-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Subtle-1-desktop-firefox-linux.png
new file mode 100644
index 00000000..d323cf56
Binary files /dev/null and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Subtle-1-desktop-firefox-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Success-1-mobile-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Success-1-mobile-webkit-linux.png
new file mode 100644
index 00000000..58f4cecf
Binary files /dev/null and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Success-1-mobile-webkit-linux.png differ
diff --git a/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Warning-1-desktop-webkit-linux.png b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Warning-1-desktop-webkit-linux.png
new file mode 100644
index 00000000..cff98445
Binary files /dev/null and b/indeks-storybook/tests/scanAll.dtest.ts-snapshots/Test-all-components-Components-Tag-Warning-1-desktop-webkit-linux.png differ