From 951a24f100cf735751ea43750186fa36fada9171 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Fri, 20 Feb 2026 05:49:02 +0100
Subject: [PATCH] feat(package/ui): os-badge (#9250)

---
 packages/ui/KATALOG.md                        |  75 +++++----
 packages/ui/PROJEKT.md                        |  90 ++++++----
 .../ui/src/components/OsBadge/OsBadge.spec.ts | 157 ++++++++++++++++++
 .../src/components/OsBadge/OsBadge.stories.ts | 140 ++++++++++++++++
 .../components/OsBadge/OsBadge.visual.spec.ts |  97 +++++++++++
 .../ui/src/components/OsBadge/OsBadge.vue     |  96 +++++++++++
 .../__screenshots__/chromium/all-shapes.png   | Bin 0 -> 1927 bytes
 .../__screenshots__/chromium/all-sizes.png    | Bin 0 -> 5046 bytes
 .../__screenshots__/chromium/all-variants.png | Bin 0 -> 3866 bytes
 .../__screenshots__/chromium/form-counter.png | Bin 0 -> 11364 bytes
 .../__screenshots__/chromium/with-icon.png    | Bin 0 -> 2672 bytes
 .../src/components/OsBadge/badge.variants.ts  |  46 +++++
 packages/ui/src/components/OsBadge/index.ts   |   8 +
 packages/ui/src/components/index.ts           |   8 +
 packages/ui/src/tailwind.preset.spec.ts       |   6 +-
 packages/ui/src/tailwind.preset.ts            |  60 ++++---
 webapp/components/Category/index.vue          |  14 +-
 .../ContributionForm/ContributionForm.vue     |  56 +++++--
 webapp/components/Group/GroupForm.vue         |  60 +++++--
 webapp/components/Group/GroupMember.vue       |   7 +-
 webapp/components/Group/GroupTeaser.vue       |  17 +-
 webapp/components/Hashtag/Hashtag.vue         |   7 +-
 webapp/components/PostTeaser/PostTeaser.vue   |   3 +-
 .../_id/__snapshots__/_slug.spec.js.snap      | 154 +++++++----------
 webapp/pages/groups/_id/_slug.vue             |  17 +-
 25 files changed, 865 insertions(+), 253 deletions(-)
 create mode 100644 packages/ui/src/components/OsBadge/OsBadge.spec.ts
 create mode 100644 packages/ui/src/components/OsBadge/OsBadge.stories.ts
 create mode 100644 packages/ui/src/components/OsBadge/OsBadge.visual.spec.ts
 create mode 100644 packages/ui/src/components/OsBadge/OsBadge.vue
 create mode 100644 packages/ui/src/components/OsBadge/__screenshots__/chromium/all-shapes.png
 create mode 100644 packages/ui/src/components/OsBadge/__screenshots__/chromium/all-sizes.png
 create mode 100644 packages/ui/src/components/OsBadge/__screenshots__/chromium/all-variants.png
 create mode 100644 packages/ui/src/components/OsBadge/__screenshots__/chromium/form-counter.png
 create mode 100644 packages/ui/src/components/OsBadge/__screenshots__/chromium/with-icon.png
 create mode 100644 packages/ui/src/components/OsBadge/badge.variants.ts
 create mode 100644 packages/ui/src/components/OsBadge/index.ts

diff --git a/packages/ui/KATALOG.md b/packages/ui/KATALOG.md
index f6b783d0d..832edfd85 100644
--- a/packages/ui/KATALOG.md
+++ b/packages/ui/KATALOG.md
@@ -13,7 +13,7 @@ Phase 0: Analyse       ██████████ 100% (8/8 Schritte) ✅
 Phase 3: OsButton      ██████████ 100% (133/133 Buttons) ✅
 Phase 4: Tier 1        ██████████ 100% (OsButton, OsIcon, OsSpinner, OsCard) ✅
 Phase 4: Tier A → HTML ██████████ 100% (10 ds-* Wrapper → Plain HTML) ✅
-Phase 4: Tier B → HTML ░░░░░░░░░░   0% (ds-chip, ds-number, ds-grid, ds-radio)
+Phase 4: Tier B        ██████░░░░  60% (ds-chip→OsBadge✅, ds-tag→OsBadge✅, ds-grid✅, ds-number⬜, ds-radio⬜)
 Phase 4: Tier 2-4      ░░░░░░░░░░   0% (OsModal, OsInput, OsMenu, OsSelect, OsTable)
 ```
 
@@ -23,9 +23,10 @@ Phase 4: Tier 2-4      ░░░░░░░░░░   0% (OsModal, OsInput, Os
 | Webapp Komponenten | 139 |
 | Styleguide Komponenten | 38 (23 in Webapp genutzt) |
 | **Gesamt** | **177** |
-| ✅ UI-Library | OsButton, OsIcon, OsSpinner, OsCard (4) |
-| ✅ → Plain HTML | Section, Placeholder, Tag, List, ListItem, Container, Heading, Text, Space, Flex, FlexItem (11) |
-| ⬜ → Plain HTML | Chip, Number, Grid, GridItem, Radio (5) — Tier B |
+| ✅ UI-Library | OsButton, OsIcon, OsSpinner, OsCard, OsBadge (5) |
+| ✅ → Plain HTML | Section, Placeholder, List, ListItem, Container, Heading, Text, Space, Flex, FlexItem, Grid, GridItem (12) |
+| ✅ → OsBadge | Chip (20 Nutzungen → OsBadge), Tag (3 → OsBadge shape="square") |
+| ⬜ → Plain HTML | Number, Radio (2) — Tier B Rest |
 | ⬜ → UI-Library | Modal, Input, Menu, MenuItem, Select, Table (6) — Tier 2-4 |
 | ⬜ Offen | Form (18 Dateien — HTML oder OsForm?) |
 | ⬜ Nicht in Webapp | Code, CopyField, FormItem, InputError, InputLabel, Page, PageTitle, Logo, Avatar, TableCol, TableHeadCol (11) |
@@ -53,7 +54,7 @@ Phase 4: Tier 2-4      ░░░░░░░░░░   0% (OsModal, OsInput, Os
 |---|------------|--------|---------|
 | 1 | Avatar | ⬜ Nicht genutzt | Webapp nutzt eigenes ProfileAvatar |
 | 2 | Card | ✅ UI-Library | → OsCard (BaseCard gelöscht) |
-| 3 | Chip | ⬜ Tier B | 5 Dateien → Plain HTML `<span class="ds-chip">` |
+| 3 | Chip | ✅ UI-Library | → OsBadge (20 Nutzungen in 5 Dateien) |
 | 4 | Code | ⬜ Nicht genutzt | Nicht in Webapp verwendet |
 | 5 | Icon | ✅ UI-Library | → OsIcon (BaseIcon gelöscht, 82 Ocelot-Icons) |
 | 6 | Number | ⬜ Tier B | 5 Dateien → Plain HTML `<div class="ds-number">` |
@@ -62,7 +63,7 @@ Phase 4: Tier 2-4      ░░░░░░░░░░   0% (OsModal, OsInput, Os
 | 9 | Table | ⬜ Tier 4 | 7 Dateien → OsTable |
 | 10 | TableCol | ⬜ Tier 4 | Intern von Table genutzt |
 | 11 | TableHeadCol | ⬜ Tier 4 | Intern von Table genutzt |
-| 12 | Tag | ✅ → HTML | Tier A: `<span class="ds-tag">` |
+| 12 | Tag | ✅ UI-Library | → OsBadge shape="square" (3 Nutzungen in 3 Dateien) |
 
 ### Data Input
 | # | Komponente | Status | Notizen |
@@ -83,8 +84,8 @@ Phase 4: Tier 2-4      ░░░░░░░░░░   0% (OsModal, OsInput, Os
 | 22 | Container | ✅ → HTML | Tier A: `<div class="ds-container ds-container-{width}">` |
 | 23 | Flex | ✅ → HTML | Tier A: Plain HTML + CSS @media Queries |
 | 24 | FlexItem | ✅ → HTML | Tier A: Plain HTML + CSS @media Queries |
-| 25 | Grid | ⬜ Tier B | 2 Dateien → CSS Grid |
-| 26 | GridItem | ⬜ Tier B | 8 Dateien → CSS Grid |
+| 25 | Grid | ✅ → HTML | 2 Dateien → CSS Grid (class="ds-grid") |
+| 26 | GridItem | ✅ → HTML | 8 Dateien → CSS Grid |
 | 27 | Modal | ⬜ Tier 2 | 7 Dateien → OsModal |
 | 28 | Page | ⬜ Nicht genutzt | Nicht direkt in Webapp verwendet |
 | 29 | PageTitle | ⬜ Nicht genutzt | Nicht direkt in Webapp verwendet |
@@ -202,7 +203,7 @@ Phase 4: Tier 2-4      ░░░░░░░░░░   0% (OsModal, OsInput, Os
 ### H-L
 | # | Komponente | Status | Kategorie | Styleguide-Pendant | Notizen |
 |---|------------|--------|-----------|-------------------|---------|
-| 64 | Hashtag | ⬜ Ausstehend | Display | Tag/Chip | |
+| 64 | Hashtag | ✅ Migriert | Display | Tag/Chip | 🔄 nutzt OsBadge shape="square" |
 | 65 | HashtagsFilter | ⬜ Ausstehend | Filter | | |
 | 66 | HeaderButton | ✅ Migriert | Button | Button | 🔄 Button-Familie, nutzt OsButton |
 | 67 | HeaderMenu | ⬜ Ausstehend | Navigation | Menu | |
@@ -370,10 +371,12 @@ Phase 4: Tier 2-4      ░░░░░░░░░░   0% (OsModal, OsInput, Os
 
 ### Layout & Typography — → Plain HTML ✅ (Tier A)
 - ~~Container, Flex, FlexItem, Section, Space~~ ✅ → HTML + CSS
-- ~~Heading, Text, List, ListItem, Tag, Placeholder~~ ✅ → HTML + CSS
+- ~~Heading, Text, List, ListItem, Placeholder~~ ✅ → HTML + CSS
+- ~~Chip, Tag~~ ✅ → OsBadge (UI-Library)
 
-### Noch zu migrieren (Tier B → Plain HTML)
-- Chip, Number, Grid, GridItem, Radio
+### Noch zu migrieren (Tier B Rest)
+- Number (5 Dateien), Radio (1 Datei)
+- ~~Grid, GridItem~~ ✅ → CSS Grid (Plain HTML)
 
 ### Feature-Komponenten (bleiben in Webapp)
 - Chat, Group, Registration, Search, etc.
@@ -430,11 +433,12 @@ Phase 4: Tier 2-4      ░░░░░░░░░░   0% (OsModal, OsInput, Os
 12. [x] _ds-compat.scss Utility-Klassen
 13. [x] 10 ds-* Wrapper → HTML + CSS (~450 Nutzungen, ~90 Dateien)
 
-### Phase 4: Tier B — ds-* → Plain HTML (ausstehend)
-14. [ ] ds-chip (5 Dateien) → `<span class="ds-chip">`
-15. [ ] ds-number (5 Dateien) → `<div class="ds-number">`
-16. [ ] ds-grid / ds-grid-item (10 Dateien) → CSS Grid
-17. [ ] ds-radio (1 Datei) → native `<input type="radio">`
+### Phase 4: Tier B — ds-* Migration (60%)
+14. [x] ds-chip (5 Dateien, 20 Nutzungen) → OsBadge (UI-Library)
+15. [x] ds-tag (3 Dateien) → OsBadge shape="square" (UI-Library)
+16. [x] ds-grid / ds-grid-item (10 Dateien) → CSS Grid (Plain HTML)
+17. [ ] ds-number (5 Dateien) → `<div class="ds-number">`
+18. [ ] ds-radio (1 Datei) → native `<input type="radio">`
 
 ### Phase 4: Tier 2-4 — UI-Library (ausstehend)
 18. [ ] OsModal (7 Dateien)
@@ -445,7 +449,7 @@ Phase 4: Tier 2-4      ░░░░░░░░░░   0% (OsModal, OsInput, Os
 
 ---
 
-**✅ Phase 0-3 abgeschlossen. Phase 4: Tier 1 + Tier A ✅, Tier B + Tier 2-4 ausstehend.**
+**✅ Phase 0-3 abgeschlossen. Phase 4: Tier 1 + Tier A ✅, Tier B 60% (Chip→OsBadge, Tag→OsBadge, Grid→HTML), Tier 2-4 ausstehend.**
 
 ---
 
@@ -945,19 +949,19 @@ interface OsDropdownProps {
 
 | # | Komponente | Status |
 |---|------------|--------|
-| — | ds-section, ds-placeholder, ds-tag, ds-list, ds-list-item | ✅ → HTML-Elemente + CSS-Klassen |
+| — | ds-section, ds-placeholder, ds-list, ds-list-item | ✅ → HTML-Elemente + CSS-Klassen |
 | — | ds-container, ds-heading, ds-text | ✅ → HTML-Elemente + CSS-Klassen |
 | — | ds-space | ✅ → div + Margin-Utility-Klassen |
 | — | ds-flex, ds-flex-item | ✅ → HTML + CSS @media Queries |
 
-### Tier B: Einfache ds-* → Plain HTML (ausstehend)
+### Tier B: Einfache ds-* Migration (60%)
 
-| # | Komponente | Dateien | Ziel |
-|---|------------|---------|------|
-| — | ds-chip | 5 | `<span class="ds-chip">` |
-| — | ds-number | 5 | `<div class="ds-number">` |
-| — | ds-grid / ds-grid-item | 10 | CSS Grid |
-| — | ds-radio | 1 | native `<input type="radio">` |
+| # | Komponente | Dateien | Ziel | Status |
+|---|------------|---------|------|--------|
+| 5 | **OsBadge** | — | ds-chip (20 Nutzungen, 5 Dateien) + ds-tag (3 Dateien) | ✅ |
+| — | ds-grid / ds-grid-item | 10 | CSS Grid (Plain HTML) | ✅ |
+| — | ds-number | 5 | `<div class="ds-number">` | ⬜ |
+| — | ds-radio | 1 | native `<input type="radio">` | ⬜ |
 
 ### Tier 2: Layout & Feedback (ausstehend)
 
@@ -998,21 +1002,26 @@ interface OsDropdownProps {
 2. OsSpinner ✅ Vereint: DsSpinner + LoadingSpinner
 3. OsButton  ✅ Vereint: DsButton + BaseButton → 133 Buttons in 79 Dateien
 4. OsCard    ✅ Vereint: DsCard + BaseCard → ~30 Dateien
+5. OsBadge   ✅ Vereint: ds-chip (20 Nutzungen) + ds-tag (3 Dateien)
 ```
 
 ### Tier A: Triviale ds-* Wrapper → Plain HTML ✅
 
 ```
-ds-section, ds-placeholder, ds-tag, ds-list, ds-list-item  ✅ → HTML + CSS-Klassen
-ds-container, ds-heading, ds-text                           ✅ → HTML + CSS-Klassen
-ds-space                                                     ✅ → div + Margin-Utilities
-ds-flex, ds-flex-item                                        ✅ → HTML + CSS @media Queries
+ds-section, ds-placeholder, ds-list, ds-list-item  ✅ → HTML + CSS-Klassen
+ds-container, ds-heading, ds-text                   ✅ → HTML + CSS-Klassen
+ds-space                                             ✅ → div + Margin-Utilities
+ds-flex, ds-flex-item                                ✅ → HTML + CSS @media Queries
 ```
 
-### Tier B: Einfache ds-* → Plain HTML (ausstehend)
+### Tier B: Einfache ds-* Migration (60%)
 
 ```
-ds-chip, ds-number, ds-grid/ds-grid-item, ds-radio → Plain HTML + CSS
+ds-chip → OsBadge (UI-Library)               ✅
+ds-tag  → OsBadge shape="square" (UI-Library) ✅
+ds-grid / ds-grid-item → CSS Grid (HTML)     ✅
+ds-number → Plain HTML                       ⬜ (5 Dateien)
+ds-radio  → native <input type="radio">      ⬜ (1 Datei)
 ```
 
 ### Tier 2-4: UI-Library (ausstehend)
@@ -1162,4 +1171,4 @@ $box-shadow-small-inset: inset 0 0 0 1px rgba(0,0,0,.05)
 **OsButton Migration: ✅ Vollständig abgeschlossen.**
 - BaseButton.vue gelöscht, base-components.js Plugin entfernt
 - Alle Tests, Snapshots, Cypress E2E-Selektoren aktualisiert
-- Nächster Schritt: Tier B (ds-chip, ds-number, ds-grid, ds-radio) oder Tier 2 (OsModal)
+- Nächster Schritt: Tier B Rest (ds-number, ds-radio) oder Tier 2 (OsModal)
diff --git a/packages/ui/PROJEKT.md b/packages/ui/PROJEKT.md
index 13351fce0..35ffc4827 100644
--- a/packages/ui/PROJEKT.md
+++ b/packages/ui/PROJEKT.md
@@ -81,10 +81,10 @@ Phase 0: ██████████ 100% (6/6 Aufgaben) ✅
 Phase 1: ██████████ 100% (6/6 Aufgaben) ✅
 Phase 2: ██████████ 100% (26/26 Aufgaben) ✅
 Phase 3: ██████████ 100% (24/24 Aufgaben) ✅ - Webapp-Integration komplett
-Phase 4: █████░░░░░  46% (12/26 Aufgaben) - Tier 1 ✅, Tier A ✅, Infra ✅ | Tier B, Tier 2-4 ausstehend
+Phase 4: ██████░░░░  54% (14/26 Aufgaben) - Tier 1 ✅, Tier A ✅, Infra ✅, OsBadge ✅ | Tier B (rest), Tier 2-4 ausstehend
 Phase 5: ░░░░░░░░░░   0% (0/7 Aufgaben)
 ───────────────────────────────────────
-Gesamt:  ████████░░  78% (74/95 Aufgaben)
+Gesamt:  ████████░░  80% (76/95 Aufgaben)
 ```
 
 ### Katalogisierung (Details in KATALOG.md)
@@ -186,38 +186,50 @@ Tier A ds-* → Plain HTML + CSS: ✅
 ├─ ds-flex/ds-flex-item: JavaScript window.innerWidth → CSS @media Queries
 │  (kein Layout-Shift bei SSR, bessere Performance)
 ├─ system.css bleibt geladen — bestehende CSS-Klassen funktionieren weiter
-├─ Verbleibend: 13 ds-* Komponenten (Tier B: 4 einfache, Tier C: 6 komplexe → UI-Library)
+├─ Verbleibend: 9 ds-* Komponenten (Tier B Rest: 2 einfache, Tier C: 6 komplexe → UI-Library)
 └─ 0 Tier-A ds-* Komponenten-Tags verbleibend
+
+ds-chip + ds-tag → OsBadge (UI-Library): ✅
+├─ OsBadge Komponente: CVA-Varianten, h() Render-Function, inheritAttrs: false
+├─ Props: variant (default/primary/danger), size (sm/md/lg), shape (pill/square)
+├─ Types: BadgeVariant, BadgeSize, BadgeShape (+ BadgeVariants)
+├─ ds-chip: 20 Nutzungen in 5 Dateien → <os-badge> (Formzähler + Gruppen-Metadaten)
+├─ ds-tag: 3 Nutzungen in 3 Dateien → <os-badge shape="square"> (Category, Hashtag)
+├─ ARIA: role="status" aria-live="polite" auf Form-Zähler (11 Stellen in 2 Dateien)
+├─ CSS-Variable: --color-default + --color-default-contrast (beide in requiredCssVariables)
+├─ 18 Unit-Tests, 6 Stories, 5 Visual Tests + 1 Keyboard Test
+└─ 0 ds-chip/ds-tag Nutzungen verbleibend
 ```
 
 ---
 
 ## Aktueller Stand
 
-**Letzte Aktualisierung:** 2026-02-19 (Session 28)
+**Letzte Aktualisierung:** 2026-02-20 (Session 30)
 
-**Aktuelle Phase:** Phase 4 - OsIcon ✅, BaseIcon → OsIcon Migration ✅, OsSpinner ✅, Spinner Webapp-Migration ✅, OsCard ✅, BaseCard → OsCard Migration ✅, Tier A ds-* → Plain HTML ✅
+**Aktuelle Phase:** Phase 4 - Tier 1 ✅, Tier A ✅, OsBadge ✅ (ds-chip + ds-tag → UI-Library) | Tier B, Tier 2-4 ausstehend
 
-**Zuletzt abgeschlossen (Session 28 - CodeRabbit Review Fixes für Tier A PR):**
-- [x] GroupForm.vue: Fehlende `buttons`-Klasse auf Button-Container ergänzt (CSS-Regel `.group-form > .buttons` griff nicht)
-- [x] ComponentSlider.vue: `<h1>` → `<h3>` (Original war `<ds-heading size="h3">`, falsch zu h1 migriert)
-- [x] SearchHeading.vue: `<h1>` → `<h5>` (Original war `<ds-heading size="h5">`, falsch zu h1 migriert)
-- [x] MySomethingList.vue: Redundantes verschachteltes `<div class="ds-mt-base ds-mb-large">` entfernt (Überbleibsel von verschachtelten ds-space)
-- [x] Empty.vue: Prop-Type `[String, Object]` → `String` (Object-Support war ds-space-Relikt, nicht implementiert)
-- [x] ChangePassword.vue: Inline-Spans → separate `<p class="ds-text">` Elemente (visuelle Regression: fehlende Block-Level-Trennung)
-- [x] RegistrationSlideEmail.vue: Label `for="checkbox0"` → `for="sendEmailAgain"` passend zu `id="sendEmailAgain"` (A11y WCAG 1.3.1/4.1.2)
-- [x] Signup.vue: `margin="large"` (totes ds-space-Attribut auf div) → `class="ds-my-large"` + `<style>` → `<style scoped>`
-- [x] SocialMedia.vue: `:key="link.id"` → `:key="link.url"` (link.id war immer undefined, socialMediaLinks() gibt kein id zurück)
-- [x] logout.vue: Hardcodierter "Logging out..." → `$t('login.loggingOut')` mit Übersetzungen in allen 9 Sprachen
-- [x] maintenance/index.vue: `alt="Under maintenance"` → `:alt="$t('maintenance.title', metadata)"` (i18n-Konsistenz) + `<style scoped>`
-- [x] admin/index.vue: `33%` → `33.333%` (Rundungsfehler bei 3-Spalten-Layout)
-- [x] profile/_id/_slug.vue: Inline-Style `margin-bottom: 10px; text-align: center` → `ds-text-center ds-mb-x-small` Utility-Klassen
-- [x] post/edit/_id.vue: `&nbsp;` aus Aside-Div entfernt (Screenreader-Problem) + zwei Style-Blöcke zu einem scoped Block gemergt
-- [x] post/create/_type.vue: Zwei Style-Blöcke (scoped + unscoped) zu einem scoped Block gemergt
-- [x] _ds-compat.scss: `display: flex` zu `.ds-space-centered` hinzugefügt (justify-content/align-items wirkten ohne display:flex nicht)
-- [x] blocked-users.vue: Unnötiges Wrapper-Div `ds-mb-large` am Kartenende entfernt
-- [x] Cypress SocialMedia: `cy.get('.ds-list-item a')` → `cy.get('.ds-list-item a[href="${link}"]')` (nutzt link-Parameter)
-- [x] Als "nicht in diesem PR" bewertet: pre-existing Code-Style Nitpicks (required:false, Ternary-Syntax, Prop-Validierung, Spacer-Divs, flex:1 0 0 Einheit, v-if="user", CSS-Nesting, Dark-Mode SVG-Farbe)
+**Zuletzt abgeschlossen (Session 30 - OsBadge Code-Review Fixes):**
+- [x] `--color-default-contrast` zu `requiredCssVariables` in tailwind.preset.ts hinzugefügt
+- [x] Doppelte `--color-default`-Deklaration in ocelot-ui-variables.scss entfernt (softest → softer konsolidiert)
+- [x] Redundante Ternär-Ausdrücke entfernt: GroupTeaser.vue + groups/_slug.vue (`group ? group.about : ''` → `group.about`)
+- [x] `BadgeVariant` Typ hinzugefügt und in OsBadge.vue verwendet (statt `NonNullable<BadgeVariants['variant']>`)
+- [x] Exports erweitert: BadgeVariant in index.ts + components/index.ts
+- [x] GroupForm.vue: `float: right` → `display: flex; flex-direction: column; align-self: flex-end` (konsistentes Flexbox-Layout)
+- [x] PlaygroundArgs in Stories: `string` → `BadgeVariant | BadgeSize | BadgeShape` (typsichere Story-Args)
+- [x] WithIcon-Story: Inline-Style `style="margin-right: 4px"` → Tailwind `class="mr-1"`
+- [x] ARIA Live Regions: `role="status" aria-live="polite"` auf 10 Form-Zähler + `role="alert" aria-live="assertive"` auf 1 Fehler-Badge
+- [x] `live` Prop entfernt — Standard-ARIA-Attribute werden direkt durchgereicht (attrs)
+- [x] KATALOG.md: Übersichtstabelle, Tier B Status, Komponenten-Tabelle, Zusammenfassungen aktualisiert
+
+**Zuvor abgeschlossen (Session 29 - OsBadge: ds-chip + ds-tag Migration):**
+- [x] OsBadge Komponente in packages/ui erstellt (CVA-Varianten, h() Render-Function)
+- [x] Props: variant (default/primary/danger), size (sm/md/lg), shape (pill/square)
+- [x] ds-chip → OsBadge: 20 Nutzungen in 5 Webapp-Dateien (GroupTeaser, GroupMember, GroupForm, ContributionForm, groups/_slug)
+- [x] ds-tag → OsBadge: 3 Nutzungen in 3 Webapp-Dateien (Category, Hashtag, PostTeaser CSS)
+- [x] CSS-Variable --color-default für neutralen Badge-Hintergrund
+- [x] Unit-Tests (16), Stories (6), Visual Tests (5+1 Keyboard), 100% Coverage
+- [x] Exports: OsBadge, badgeVariants, BadgeShape, BadgeSize, BadgeVariants
 
 **Zuvor abgeschlossen (Session 27 - Tier A: ds-* Komponenten → Plain HTML):**
 - [x] `_ds-compat.scss` erstellt (Utility-Klassen für Margins, Flex, Centered)
@@ -236,8 +248,8 @@ Tier A ds-* → Plain HTML + CSS: ✅
 - [x] Test-Fix: Empty.spec.js `attributes().margin` → `classes().toContain('ds-my-xxx-small')`
 - [x] 0 Tier-A `ds-*` Komponenten-Tags verbleibend
 
-**Verbleibende ds-* Komponenten (13 Typen):**
-- Tier B (→ Plain HTML): ds-chip (5), ds-number (5), ds-grid/ds-grid-item (10), ds-radio (1)
+**Verbleibende ds-* Komponenten (9 Typen):**
+- Tier B Rest (→ Plain HTML): ds-number (5), ds-radio (1)
 - Tier C (→ UI-Library): ds-input (23), ds-form (18), ds-modal (7), ds-menu/ds-menu-item (17), ds-table (7), ds-select (3)
 
 **Zuvor abgeschlossen (Session 26 - CodeRabbit Review Fixes):**
@@ -359,7 +371,8 @@ Tier A ds-* → Plain HTML + CSS: ✅
 - [x] OsSpinner Webapp-Migration (DsSpinner + LoadingSpinner → OsSpinner) ✅
 - [x] OsCard Komponente + BaseCard → OsCard Webapp-Migration ✅
 - [x] Tier A: 10 triviale ds-* Wrapper → Plain HTML + CSS ✅
-- [ ] Tier B: ds-chip, ds-number, ds-grid/ds-grid-item, ds-radio → Plain HTML
+- [x] OsBadge Komponente + ds-chip/ds-tag → OsBadge Webapp-Migration ✅
+- [ ] Tier B (Rest): ds-number, ds-grid/ds-grid-item, ds-radio → Plain HTML
 - [ ] Weitere Tier 2 Komponenten (OsModal, OsDropdown, OsAvatar, OsInput)
 - [ ] ds-form + ds-input → OsForm + OsInput (stark gekoppelt, 18+23 Dateien)
 - [ ] ds-menu / ds-menu-item → OsMenu / OsMenuItem
@@ -627,8 +640,9 @@ Jeder migrierte Button muss manuell geprüft werden: Normal, Hover, Focus, Activ
 - [x] ds-space → div + Margin-Utility-Klassen (139 Nutzungen)
 - [x] ds-flex / ds-flex-item → HTML + CSS @media Queries (103 Nutzungen)
 
-**Tier B: Einfache ds-* → Plain HTML (ausstehend)**
-- [ ] ds-chip (5 Dateien) → `<span class="ds-chip">`
+**Tier B: Einfache ds-* → Plain HTML / UI-Library**
+- [x] ds-chip (5 Dateien) → OsBadge (UI-Library) ✅
+- [x] ds-tag (3 Dateien) → OsBadge shape="square" (UI-Library) ✅
 - [ ] ds-number (5 Dateien) → `<div class="ds-number">`
 - [ ] ds-grid / ds-grid-item (10 Dateien) → CSS Grid
 - [ ] ds-radio (1 Datei) → native `<input type="radio">`
@@ -1765,6 +1779,15 @@ Bei der Migration werden:
 | 2026-02-19 | **CSS Fixes** | .buttons Klasse ergänzt (GroupForm), display:flex auf .ds-space-centered, 33%→33.333%, inline-style→Utilities |
 | 2026-02-19 | **Scoping** | Signup.vue, maintenance/index.vue, post/create/_type.vue, post/edit/_id.vue: unscoped → scoped Style-Blöcke |
 | 2026-02-19 | **Migration-Artefakte** | Redundante Wrapper-Divs, tote Attribute (margin="large"), Span→P Block-Level Regression |
+| 2026-02-20 | **OsBadge Komponente (Session 29)** | Neue Komponente: CVA-Varianten (variant, size, shape), h() Render-Function, 16 Tests, 6 Stories |
+| 2026-02-20 | **ds-chip → OsBadge** | 20 Nutzungen in 5 Dateien: GroupTeaser, GroupMember, GroupForm, ContributionForm, groups/_slug |
+| 2026-02-20 | **ds-tag → OsBadge** | 3 Nutzungen in 3 Dateien: Category (shape="square"), Hashtag (shape="square"), PostTeaser (CSS) |
+| 2026-02-20 | **OsBadge Features** | shape-Prop (pill/square), w-fit (Flex-Container-Fix), inline-flex items-center (Icon-Zentrierung) |
+| 2026-02-20 | **CSS-Variable** | --color-default + --color-default-contrast für neutralen Badge-Hintergrund |
+| 2026-02-20 | **Code-Review Fixes (Session 30)** | --color-default-contrast in requiredCssVariables, doppelte --color-default Deklaration entfernt |
+| 2026-02-20 | **Type Safety** | BadgeVariant Typ exportiert, PlaygroundArgs typisiert, redundante Ternäre entfernt |
+| 2026-02-20 | **Layout-Konsistenz** | GroupForm float:right → Flexbox align-self:flex-end, Inline-Style → Tailwind in Stories |
+| 2026-02-20 | **ARIA Live Regions** | role="status"/aria-live="polite" auf 11 Form-Badges (WCAG 4.1.3), live Prop → Standard-Attribute |
 
 ---
 
@@ -1782,9 +1805,10 @@ Bei der Migration werden:
 **Styleguide-Migration:**
 | Status | Komponenten |
 |--------|------------|
-| ✅ UI-Library | OsButton, OsIcon, OsSpinner, OsCard (4) |
-| ✅ → Plain HTML | Section, Placeholder, Tag, List, ListItem, Container, Heading, Text, Space, Flex, FlexItem (11) — Tier A |
-| ⬜ → Plain HTML | Chip, Number, Grid, GridItem, Radio (5) — Tier B |
+| ✅ UI-Library | OsButton, OsIcon, OsSpinner, OsCard, OsBadge (5) |
+| ✅ → Plain HTML | Section, Placeholder, List, ListItem, Container, Heading, Text, Space, Flex, FlexItem (10) — Tier A |
+| ✅ → UI-Library | Chip, Tag → OsBadge (2) — Tier B |
+| ⬜ → Plain HTML | Number, Grid, GridItem, Radio (4) — Tier B |
 | ⬜ → UI-Library | Modal, Input, Menu, MenuItem, Select, Table (6) — Tier 2-4 |
 | ⬜ Nicht genutzt | Code, CopyField, FormItem, InputError, InputLabel, Page, PageTitle, Logo, Avatar, TableCol, TableHeadCol (11) |
 | ⬜ Offen | Form (18 Dateien — HTML `<form>` oder OsForm?) |
diff --git a/packages/ui/src/components/OsBadge/OsBadge.spec.ts b/packages/ui/src/components/OsBadge/OsBadge.spec.ts
new file mode 100644
index 000000000..0e15d6847
--- /dev/null
+++ b/packages/ui/src/components/OsBadge/OsBadge.spec.ts
@@ -0,0 +1,157 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+import OsBadge from './OsBadge.vue'
+
+describe('osBadge', () => {
+  describe('rendering', () => {
+    it('renders as span element', () => {
+      const wrapper = mount(OsBadge)
+
+      expect((wrapper.element as HTMLElement).tagName).toBe('SPAN')
+    })
+
+    it('renders default slot content', () => {
+      const wrapper = mount(OsBadge, {
+        slots: { default: 'Badge text' },
+      })
+
+      expect(wrapper.text()).toBe('Badge text')
+    })
+
+    it('renders without content', () => {
+      const wrapper = mount(OsBadge)
+
+      expect(wrapper.exists()).toBe(true)
+      expect(wrapper.text()).toBe('')
+    })
+  })
+
+  describe('css', () => {
+    it('has os-badge class', () => {
+      const wrapper = mount(OsBadge)
+
+      expect(wrapper.classes()).toContain('os-badge')
+    })
+
+    it('merges custom classes', () => {
+      const wrapper = mount(OsBadge, {
+        attrs: { class: 'my-custom-class' },
+      })
+
+      expect(wrapper.classes()).toContain('os-badge')
+      expect(wrapper.classes()).toContain('my-custom-class')
+    })
+
+    it('passes through attributes', () => {
+      const wrapper = mount(OsBadge, {
+        attrs: { 'data-testid': 'my-badge' },
+      })
+
+      expect(wrapper.attributes('data-testid')).toBe('my-badge')
+    })
+  })
+
+  describe('variant prop', () => {
+    it('applies default variant classes when no variant specified', () => {
+      const wrapper = mount(OsBadge)
+
+      expect(wrapper.classes()).toContain('bg-[var(--color-default)]')
+      expect(wrapper.classes()).toContain('text-[var(--color-default-contrast)]')
+    })
+
+    it('applies primary variant classes', () => {
+      const wrapper = mount(OsBadge, {
+        props: { variant: 'primary' },
+      })
+
+      expect(wrapper.classes()).toContain('bg-[var(--color-primary)]')
+      expect(wrapper.classes()).toContain('text-[var(--color-primary-contrast)]')
+    })
+
+    it('applies danger variant classes', () => {
+      const wrapper = mount(OsBadge, {
+        props: { variant: 'danger' },
+      })
+
+      expect(wrapper.classes()).toContain('bg-[var(--color-danger)]')
+      expect(wrapper.classes()).toContain('text-[var(--color-danger-contrast)]')
+    })
+  })
+
+  describe('size prop', () => {
+    it('applies sm size classes by default', () => {
+      const wrapper = mount(OsBadge)
+
+      expect(wrapper.classes()).toContain('text-[0.75rem]')
+      expect(wrapper.classes()).toContain('px-[0.8em]')
+    })
+
+    it('applies md size classes', () => {
+      const wrapper = mount(OsBadge, {
+        props: { size: 'md' },
+      })
+
+      expect(wrapper.classes()).toContain('text-[0.875rem]')
+      expect(wrapper.classes()).toContain('px-[1em]')
+    })
+
+    it('applies lg size classes', () => {
+      const wrapper = mount(OsBadge, {
+        props: { size: 'lg' },
+      })
+
+      expect(wrapper.classes()).toContain('text-[1rem]')
+      expect(wrapper.classes()).toContain('px-[1.2em]')
+    })
+  })
+
+  describe('shape prop', () => {
+    it('applies pill shape by default', () => {
+      const wrapper = mount(OsBadge)
+
+      expect(wrapper.classes()).toContain('rounded-[2em]')
+    })
+
+    it('applies square shape', () => {
+      const wrapper = mount(OsBadge, {
+        props: { shape: 'square' },
+      })
+
+      expect(wrapper.classes()).toContain('rounded-[0.25em]')
+    })
+  })
+
+  describe('aria attributes', () => {
+    it('has no role or aria-live by default', () => {
+      const wrapper = mount(OsBadge)
+
+      expect(wrapper.attributes('role')).toBeUndefined()
+      expect(wrapper.attributes('aria-live')).toBeUndefined()
+    })
+
+    it('passes through role attribute', () => {
+      const wrapper = mount(OsBadge, {
+        attrs: { role: 'status' },
+      })
+
+      expect(wrapper.attributes('role')).toBe('status')
+    })
+
+    it('passes through aria-live attribute', () => {
+      const wrapper = mount(OsBadge, {
+        attrs: { 'aria-live': 'polite' },
+      })
+
+      expect(wrapper.attributes('aria-live')).toBe('polite')
+    })
+  })
+
+  describe('keyboard accessibility', () => {
+    it('is not focusable (non-interactive element)', () => {
+      const wrapper = mount(OsBadge)
+
+      expect(wrapper.attributes('tabindex')).toBeUndefined()
+    })
+  })
+})
diff --git a/packages/ui/src/components/OsBadge/OsBadge.stories.ts b/packages/ui/src/components/OsBadge/OsBadge.stories.ts
new file mode 100644
index 000000000..d6ce17346
--- /dev/null
+++ b/packages/ui/src/components/OsBadge/OsBadge.stories.ts
@@ -0,0 +1,140 @@
+import { computed } from 'vue'
+
+import OsBadge from './OsBadge.vue'
+
+import type { BadgeShape, BadgeSize, BadgeVariant } from './badge.variants'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+const meta: Meta<typeof OsBadge> = {
+  title: 'Components/OsBadge',
+  component: OsBadge,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof OsBadge>
+
+interface PlaygroundArgs {
+  variant: BadgeVariant
+  size: BadgeSize
+  shape: BadgeShape
+  content: string
+}
+
+export const Playground: StoryObj<PlaygroundArgs> = {
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'primary', 'danger'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    shape: {
+      control: 'select',
+      options: ['pill', 'square'],
+    },
+    content: {
+      control: 'text',
+    },
+  },
+  args: {
+    variant: 'default',
+    size: 'sm',
+    shape: 'pill',
+    content: 'Badge',
+  },
+  render: (args) => ({
+    components: { OsBadge },
+    setup() {
+      const badgeProps = computed(() => ({
+        variant: args.variant,
+        size: args.size,
+        shape: args.shape,
+      }))
+      const content = computed(() => args.content)
+      return { badgeProps, content }
+    },
+    template: `<OsBadge v-bind="badgeProps">{{ content }}</OsBadge>`,
+  }),
+}
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { OsBadge },
+    template: `
+      <div data-testid="all-variants" class="flex items-center gap-3">
+        <OsBadge variant="default">Default</OsBadge>
+        <OsBadge variant="primary">Primary</OsBadge>
+        <OsBadge variant="danger">Danger</OsBadge>
+      </div>
+    `,
+  }),
+}
+
+export const AllSizes: Story = {
+  render: () => ({
+    components: { OsBadge },
+    template: `
+      <div data-testid="all-sizes" class="flex items-end gap-3">
+        <div class="flex flex-col items-center gap-2">
+          <OsBadge size="sm">Small</OsBadge>
+          <span class="text-xs text-gray-500">sm</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <OsBadge size="md">Medium</OsBadge>
+          <span class="text-xs text-gray-500">md</span>
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <OsBadge size="lg">Large</OsBadge>
+          <span class="text-xs text-gray-500">lg</span>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const AllShapes: Story = {
+  render: () => ({
+    components: { OsBadge },
+    template: `
+      <div data-testid="all-shapes" class="flex items-center gap-3">
+        <OsBadge shape="pill">Pill</OsBadge>
+        <OsBadge shape="square">Square</OsBadge>
+      </div>
+    `,
+  }),
+}
+
+export const FormCounter: Story = {
+  render: () => ({
+    components: { OsBadge },
+    template: `
+      <div data-testid="form-counter" class="flex flex-col gap-3">
+        <p class="text-sm text-gray-500 m-0">Valid counter:</p>
+        <OsBadge size="md">42/100</OsBadge>
+        <p class="text-sm text-gray-500 m-0">Error counter (danger):</p>
+        <OsBadge size="md" variant="danger">105/100 ⚠</OsBadge>
+        <p class="text-sm text-gray-500 m-0">Default with counter (form idle):</p>
+        <OsBadge size="md" variant="default">0/100</OsBadge>
+      </div>
+    `,
+  }),
+}
+
+export const WithIcon: Story = {
+  render: () => ({
+    components: { OsBadge },
+    template: `
+      <div data-testid="with-icon" class="flex items-center gap-3">
+        <OsBadge variant="primary">
+          <span class="mr-1">✓</span> Verified
+        </OsBadge>
+        <OsBadge variant="danger">
+          <span class="mr-1">⚠</span> Error
+        </OsBadge>
+      </div>
+    `,
+  }),
+}
diff --git a/packages/ui/src/components/OsBadge/OsBadge.visual.spec.ts b/packages/ui/src/components/OsBadge/OsBadge.visual.spec.ts
new file mode 100644
index 000000000..cd18062c3
--- /dev/null
+++ b/packages/ui/src/components/OsBadge/OsBadge.visual.spec.ts
@@ -0,0 +1,97 @@
+import { AxeBuilder } from '@axe-core/playwright'
+import { expect, test } from '@playwright/test'
+
+import type { Page } from '@playwright/test'
+
+const STORY_URL = '/iframe.html?id=components-osbadge'
+const STORY_ROOT = '#storybook-root'
+
+async function waitForReady(page: Page) {
+  await page.evaluate(async () => document.fonts.ready)
+}
+
+async function checkA11y(page: Page) {
+  const results = await new AxeBuilder({ page }).include(STORY_ROOT).analyze()
+
+  expect(results.violations).toEqual([])
+}
+
+test.describe('OsBadge keyboard accessibility', () => {
+  test('badge is not focusable (non-interactive element)', async ({ page }) => {
+    await page.goto(`${STORY_URL}--all-variants&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+
+    const badges = root.locator('.os-badge')
+    const count = await badges.count()
+
+    expect(count).toBeGreaterThan(0)
+
+    for (let i = 0; i < count; i++) {
+      await expect(badges.nth(i)).not.toHaveAttribute('tabindex')
+      await expect(badges.nth(i)).not.toHaveAttribute('role')
+    }
+
+    await page.keyboard.press('Tab')
+    for (let i = 0; i < count; i++) {
+      await expect(badges.nth(i)).not.toBeFocused()
+    }
+  })
+})
+
+test.describe('OsBadge visual regression', () => {
+  test('all variants', async ({ page }) => {
+    await page.goto(`${STORY_URL}--all-variants&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+    await waitForReady(page)
+
+    await expect(root.locator('[data-testid="all-variants"]')).toHaveScreenshot('all-variants.png')
+
+    await checkA11y(page)
+  })
+
+  test('all sizes', async ({ page }) => {
+    await page.goto(`${STORY_URL}--all-sizes&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+    await waitForReady(page)
+
+    await expect(root.locator('[data-testid="all-sizes"]')).toHaveScreenshot('all-sizes.png')
+
+    await checkA11y(page)
+  })
+
+  test('all shapes', async ({ page }) => {
+    await page.goto(`${STORY_URL}--all-shapes&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+    await waitForReady(page)
+
+    await expect(root.locator('[data-testid="all-shapes"]')).toHaveScreenshot('all-shapes.png')
+
+    await checkA11y(page)
+  })
+
+  test('form counter', async ({ page }) => {
+    await page.goto(`${STORY_URL}--form-counter&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+    await waitForReady(page)
+
+    await expect(root.locator('[data-testid="form-counter"]')).toHaveScreenshot('form-counter.png')
+
+    await checkA11y(page)
+  })
+
+  test('with icon', async ({ page }) => {
+    await page.goto(`${STORY_URL}--with-icon&viewMode=story`)
+    const root = page.locator(STORY_ROOT)
+    await root.waitFor()
+    await waitForReady(page)
+
+    await expect(root.locator('[data-testid="with-icon"]')).toHaveScreenshot('with-icon.png')
+
+    await checkA11y(page)
+  })
+})
diff --git a/packages/ui/src/components/OsBadge/OsBadge.vue b/packages/ui/src/components/OsBadge/OsBadge.vue
new file mode 100644
index 000000000..486827ac8
--- /dev/null
+++ b/packages/ui/src/components/OsBadge/OsBadge.vue
@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { defineComponent, getCurrentInstance, h, isVue2 } from 'vue-demi'
+
+  import { cn } from '#src/utils'
+
+  import { badgeVariants } from './badge.variants'
+
+  import type { BadgeShape, BadgeSize, BadgeVariant } from './badge.variants'
+  import type { ClassValue } from 'clsx'
+  import type { PropType } from 'vue-demi'
+
+  /**
+   * Non-interactive label for metadata display (e.g. group info) and
+   * form counters (e.g. character count with validation state).
+   *
+   * @slot default - Badge content (text, icons)
+   */
+  export default defineComponent({
+    name: 'OsBadge',
+    inheritAttrs: false,
+    props: {
+      /**
+       * Visual style of the badge.
+       * - `default` — neutral gray background
+       * - `primary` — brand color (green)
+       * - `danger` — error/warning color (red)
+       */
+      variant: {
+        type: String as PropType<BadgeVariant>,
+        default: undefined,
+      },
+      /**
+       * Size of the badge.
+       * - `sm` — compact (default)
+       * - `md` — medium
+       * - `lg` — large
+       */
+      size: {
+        type: String as PropType<BadgeSize>,
+        default: undefined,
+      },
+      /**
+       * Shape of the badge.
+       * - `pill` — fully rounded (default)
+       * - `square` — slightly rounded corners
+       */
+      shape: {
+        type: String as PropType<BadgeShape>,
+        default: undefined,
+      },
+    },
+    setup(props, { slots, attrs }) {
+      /* v8 ignore start -- Vue 2 only */
+      const instance = isVue2 ? getCurrentInstance() : null
+      /* v8 ignore stop */
+
+      return () => {
+        const children = slots.default?.()
+        const badgeClass = cn(
+          'os-badge',
+          badgeVariants({ variant: props.variant, size: props.size, shape: props.shape }),
+        )
+
+        /* v8 ignore start -- Vue 2 branch tested in webapp Jest tests */
+        if (isVue2) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const proxy = instance?.proxy as any
+          const parentClass = proxy?.$vnode?.data?.staticClass || ''
+          const parentDynClass = proxy?.$vnode?.data?.class
+          const parentAttrs = proxy?.$vnode?.data?.attrs || {}
+
+          return h(
+            'span',
+            {
+              class: cn(badgeClass, parentClass, parentDynClass),
+              attrs: { ...parentAttrs, ...attrs },
+            },
+            children,
+          )
+        }
+        /* v8 ignore stop */
+
+        const { class: attrClass, ...restAttrs } = attrs as Record<string, unknown>
+
+        return h(
+          'span',
+          {
+            class: cn(badgeClass, attrClass as ClassValue),
+            ...restAttrs,
+          },
+          children,
+        )
+      }
+    },
+  })
+</script>
diff --git a/packages/ui/src/components/OsBadge/__screenshots__/chromium/all-shapes.png b/packages/ui/src/components/OsBadge/__screenshots__/chromium/all-shapes.png
new file mode 100644
index 0000000000000000000000000000000000000000..e8611d1ea23f3f6b25ded5a8b8456b2cc2ad944a
GIT binary patch
literal 1927
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
VRW%#DDw*`H2L3a`y57n+@qd_bf;IpE

literal 0
HcmV?d00001

diff --git a/packages/ui/src/components/OsBadge/__screenshots__/chromium/all-sizes.png b/packages/ui/src/components/OsBadge/__screenshots__/chromium/all-sizes.png
new file mode 100644
index 0000000000000000000000000000000000000000..42be4f1a935383b7dc8a3c2614aa0ecf116ace05
GIT binary patch
literal 5046
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
YvOk*)ephz~q5o8LGz`^C)EpoG55uKOD*ylh

literal 0
HcmV?d00001

diff --git a/packages/ui/src/components/OsBadge/__screenshots__/chromium/all-variants.png b/packages/ui/src/components/OsBadge/__screenshots__/chromium/all-variants.png
new file mode 100644
index 0000000000000000000000000000000000000000..a826884be88662d4f0dcff54955f4be7b91330bc
GIT binary patch
literal 3866
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

literal 0
HcmV?d00001

diff --git a/packages/ui/src/components/OsBadge/__screenshots__/chromium/form-counter.png b/packages/ui/src/components/OsBadge/__screenshots__/chromium/form-counter.png
new file mode 100644
index 0000000000000000000000000000000000000000..f16cc4c6353a8d971d0bf653a1f68f76aa369cba
GIT binary patch
literal 11364
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
Yv>wG4y8FyBUUaD-t146a=G~wF0elgJ5C8xG

literal 0
HcmV?d00001

diff --git a/packages/ui/src/components/OsBadge/__screenshots__/chromium/with-icon.png b/packages/ui/src/components/OsBadge/__screenshots__/chromium/with-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d493d1d2ef32844bfa817336471535b4e4e1d20
GIT binary patch
literal 2672
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

literal 0
HcmV?d00001

diff --git a/packages/ui/src/components/OsBadge/badge.variants.ts b/packages/ui/src/components/OsBadge/badge.variants.ts
new file mode 100644
index 000000000..d932092a4
--- /dev/null
+++ b/packages/ui/src/components/OsBadge/badge.variants.ts
@@ -0,0 +1,46 @@
+import { cva } from 'class-variance-authority'
+
+import type { VariantProps } from 'class-variance-authority'
+
+/**
+ * Badge variants using CVA (Class Variance Authority)
+ *
+ * Non-interactive label for metadata display and form counters.
+ */
+export const badgeVariants = cva(
+  ['inline-flex w-fit items-center gap-[0.25em] font-semibold leading-[1.3]'],
+  {
+    variants: {
+      variant: {
+        default: 'text-[var(--color-default-contrast)] bg-[var(--color-default)]',
+        primary: 'text-[var(--color-primary-contrast)] bg-[var(--color-primary)]',
+        danger: 'text-[var(--color-danger-contrast)] bg-[var(--color-danger)]',
+      },
+      size: {
+        sm: 'text-[0.75rem] py-[0.2em] px-[0.8em]',
+        md: 'text-[0.875rem] py-[0.15em] px-[1em]',
+        lg: 'text-[1rem] py-[0.15em] px-[1.2em]',
+      },
+      shape: {
+        pill: 'rounded-[2em]',
+        square: 'rounded-[0.25em]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'sm',
+      shape: 'pill',
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
+
+/** Badge color variant: default | primary | danger */
+export type BadgeVariant = NonNullable<BadgeVariants['variant']>
+
+/** Badge-specific size subset: sm | md | lg */
+export type BadgeSize = NonNullable<BadgeVariants['size']>
+
+/** Badge shape: pill | square */
+export type BadgeShape = NonNullable<BadgeVariants['shape']>
diff --git a/packages/ui/src/components/OsBadge/index.ts b/packages/ui/src/components/OsBadge/index.ts
new file mode 100644
index 000000000..755149621
--- /dev/null
+++ b/packages/ui/src/components/OsBadge/index.ts
@@ -0,0 +1,8 @@
+export { default as OsBadge } from './OsBadge.vue'
+export {
+  badgeVariants,
+  type BadgeShape,
+  type BadgeSize,
+  type BadgeVariant,
+  type BadgeVariants,
+} from './badge.variants'
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index fad180acf..61e674bc0 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -19,3 +19,11 @@ export {
 } from './OsIcon'
 export { OsSpinner, SPINNER_SIZES } from './OsSpinner'
 export { OsCard } from './OsCard'
+export {
+  OsBadge,
+  badgeVariants,
+  type BadgeShape,
+  type BadgeSize,
+  type BadgeVariant,
+  type BadgeVariants,
+} from './OsBadge'
diff --git a/packages/ui/src/tailwind.preset.spec.ts b/packages/ui/src/tailwind.preset.spec.ts
index 3760bae40..506cbb310 100644
--- a/packages/ui/src/tailwind.preset.spec.ts
+++ b/packages/ui/src/tailwind.preset.spec.ts
@@ -1,13 +1,15 @@
+/* eslint-disable import-x/no-deprecated */
 import { describe, it, expect, vi, afterEach, expectTypeOf } from 'vitest'
 
 import { ocelotPreset, requiredCssVariables, validateCssVariables } from './tailwind.preset'
 
 describe('tailwind.preset', () => {
-  describe('ocelotPreset', () => {
-    it('exports a valid Tailwind preset with theme.extend structure', () => {
+  describe('ocelotPreset (deprecated)', () => {
+    it('exports empty preset for backward compatibility', () => {
       expect(ocelotPreset).toBeDefined()
       expect(ocelotPreset).toHaveProperty('theme')
       expect(ocelotPreset.theme).toHaveProperty('extend')
+      expect(ocelotPreset.theme.extend).toStrictEqual({})
     })
   })
 
diff --git a/packages/ui/src/tailwind.preset.ts b/packages/ui/src/tailwind.preset.ts
index d12bc5d9f..bcb238e9d 100644
--- a/packages/ui/src/tailwind.preset.ts
+++ b/packages/ui/src/tailwind.preset.ts
@@ -1,29 +1,23 @@
 /**
- * Tailwind CSS Preset for @ocelot-social/ui
+ * CSS Variable contract for @ocelot-social/ui
  *
- * This preset defines CSS Custom Properties used by components.
- * The library does NOT provide default values - the consuming app must define all variables.
+ * Components use CSS Custom Properties via arbitrary values (e.g. `bg-[var(--color-primary)]`)
+ * rather than Tailwind theme tokens. No Tailwind preset or @config/@theme is needed.
  *
- * Branding hierarchy:
- * 1. Webapp defines default branding (base colors)
- * 2. Specialized brandings override the defaults
- *
- * Usage in your tailwind.config.js:
- * ```js
- * import { ocelotPreset } from '@ocelot-social/ui/tailwind.preset'
- *
- * export default {
- *   presets: [ocelotPreset],
- *   // your config...
+ * The consuming app must define all required CSS variables on :root:
+ * ```css
+ * :root {
+ *   --color-primary: #6dba4a;
+ *   --color-primary-hover: #7ecf5a;
+ *   --color-primary-active: #4a8a30;
+ *   --color-primary-contrast: #ffffff;
+ *   // ... see requiredCssVariables for the full list
  * }
  * ```
  *
- * Required CSS Variables (defined by webapp):
- * - See `requiredCssVariables` export for the full list
+ * Use `validateCssVariables()` in development to catch missing variables early.
  */
 
-import type { Config } from 'tailwindcss'
-
 /**
  * List of CSS Custom Properties that must be defined by the consuming app.
  * This list grows as components are added to the library.
@@ -32,27 +26,42 @@ export const requiredCssVariables: string[] = [
   // Primary
   '--color-primary',
   '--color-primary-hover',
+  '--color-primary-active',
   '--color-primary-contrast',
   // Secondary
   '--color-secondary',
   '--color-secondary-hover',
+  '--color-secondary-active',
   '--color-secondary-contrast',
   // Danger
   '--color-danger',
   '--color-danger-hover',
+  '--color-danger-active',
   '--color-danger-contrast',
   // Warning
   '--color-warning',
   '--color-warning-hover',
+  '--color-warning-active',
   '--color-warning-contrast',
   // Success
   '--color-success',
   '--color-success-hover',
+  '--color-success-active',
   '--color-success-contrast',
   // Info
   '--color-info',
   '--color-info-hover',
+  '--color-info-active',
   '--color-info-contrast',
+  // Default (neutral)
+  '--color-default',
+  '--color-default-hover',
+  '--color-default-active',
+  '--color-default-contrast',
+  '--color-default-contrast-inverse',
+  // Disabled
+  '--color-disabled',
+  '--color-disabled-contrast',
 ]
 
 /**
@@ -84,12 +93,13 @@ export function validateCssVariables(): void {
   }
 }
 
-export const ocelotPreset: Partial<Config> = {
+/**
+ * @deprecated This preset is currently empty. Components use CSS Custom Properties
+ * via arbitrary values (e.g. `bg-[var(--color-primary)]`) and do not require
+ * Tailwind theme tokens. Kept for backward compatibility.
+ */
+export const ocelotPreset = {
   theme: {
-    extend: {
-      // Colors and other theme extensions will be added here as components are developed.
-      // All values use CSS Custom Properties WITHOUT defaults.
-      // Example: primary: { DEFAULT: 'var(--color-primary)' }
-    },
+    extend: {},
   },
-}
+} as const
diff --git a/webapp/components/Category/index.vue b/webapp/components/Category/index.vue
index 9355c46cd..058feaa32 100644
--- a/webapp/components/Category/index.vue
+++ b/webapp/components/Category/index.vue
@@ -1,20 +1,17 @@
 <template>
-  <span
-    class="ds-tag ds-tag-size-base ds-tag-medium category-tag"
-    :class="filterActive ? 'filterActive' : ''"
-  >
+  <os-badge shape="square" class="category-tag" :class="filterActive ? 'filterActive' : ''">
     <os-icon :icon="resolvedIcon" />
     {{ name }}
-  </span>
+  </os-badge>
 </template>
 
 <script>
-import { OsIcon } from '@ocelot-social/ui'
+import { OsBadge, OsIcon } from '@ocelot-social/ui'
 import { resolveIcon } from '~/utils/iconRegistry'
 
 export default {
   name: 'HcCategory',
-  components: { OsIcon },
+  components: { OsBadge, OsIcon },
   props: {
     icon: { type: String, required: true },
     name: { type: String, default: '' },
@@ -30,14 +27,11 @@ export default {
 
 <style lang="scss">
 .category-tag {
-  display: inline-flex;
-  align-items: center;
   &.language {
     float: right;
   }
 
   > .os-icon {
-    margin-right: $space-xx-small;
     font-size: $font-size-base;
   }
 }
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 48d90db6b..cc504b884 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -39,20 +39,28 @@
             autofocus
             size="large"
           />
-          <ds-chip size="base" :color="errors && errors.title && 'danger'">
+          <os-badge
+            role="status"
+            aria-live="polite"
+            :variant="errors && errors.title ? 'danger' : undefined"
+          >
             {{ formData.title.length }}/{{ formSchema.title.max }}
             <os-icon v-if="errors && errors.title" :icon="icons.warning" />
-          </ds-chip>
+          </os-badge>
           <editor
             :users="users"
             :value="formData.content"
             :hashtags="hashtags"
             @input="updateEditorContent"
           />
-          <ds-chip size="base" :color="errors && errors.content && 'danger'">
+          <os-badge
+            role="status"
+            aria-live="polite"
+            :variant="errors && errors.content ? 'danger' : undefined"
+          >
             {{ contentLength }}
             <os-icon v-if="errors && errors.content" :icon="icons.warning" />
-          </ds-chip>
+          </os-badge>
 
           <!-- Eventdata -->
           <div v-if="createEvent" class="eventDatas">
@@ -81,9 +89,13 @@
                   v-if="errors && errors.eventStart"
                   class="chipbox event-grid-item-margin-helper"
                 >
-                  <ds-chip size="base" :color="errors && errors.eventStart && 'danger'">
+                  <os-badge
+                    role="alert"
+                    aria-live="assertive"
+                    :variant="errors && errors.eventStart ? 'danger' : undefined"
+                  >
                     <os-icon :icon="icons.warning" />
-                  </ds-chip>
+                  </os-badge>
                 </div>
               </div>
               <div class="event-grid-item">
@@ -114,10 +126,14 @@
                   :placeholder="$t('post.viewEvent.eventVenue')"
                 />
                 <div class="chipbox">
-                  <ds-chip size="base" :color="errors && errors.eventVenue && 'danger'">
+                  <os-badge
+                    role="status"
+                    aria-live="polite"
+                    :variant="errors && errors.eventVenue ? 'danger' : undefined"
+                  >
                     {{ formData.eventVenue.length }}/{{ formSchema.eventVenue.max }}
                     <os-icon v-if="errors && errors.eventVenue" :icon="icons.warning" />
-                  </ds-chip>
+                  </os-badge>
                 </div>
               </div>
               <div v-if="showEventLocationName" class="event-grid-item">
@@ -127,10 +143,14 @@
                   :placeholder="$t('post.viewEvent.eventLocationName')"
                 />
                 <div class="chipbox">
-                  <ds-chip size="base" :color="errors && errors.eventLocationName && 'danger'">
+                  <os-badge
+                    role="status"
+                    aria-live="polite"
+                    :variant="errors && errors.eventLocationName ? 'danger' : undefined"
+                  >
                     {{ formData.eventLocationName.length }}/{{ formSchema.eventLocationName.max }}
                     <os-icon v-if="errors && errors.eventLocationName" :icon="icons.warning" />
-                  </ds-chip>
+                  </os-badge>
                 </div>
               </div>
             </div>
@@ -153,14 +173,15 @@
             model="categoryIds"
             :existingCategoryIds="formData.categoryIds"
           />
-          <ds-chip
+          <os-badge
             v-if="categoriesActive"
-            size="base"
-            :color="errors && errors.categoryIds && 'danger'"
+            role="status"
+            aria-live="polite"
+            :variant="errors && errors.categoryIds ? 'danger' : undefined"
           >
             {{ formData.categoryIds.length }} / 3
             <os-icon v-if="errors && errors.categoryIds" :icon="icons.warning" />
-          </ds-chip>
+          </os-badge>
           <div class="ds-flex ds-flex-gap-xxx-small buttons-footer">
             <div style="flex: 3.5 0 0" class="buttons-footer-helper">
               <!-- TODO => remove v-html! only text ! no html! security first! -->
@@ -201,7 +222,7 @@
   </div>
 </template>
 <script>
-import { OsButton, OsCard, OsIcon } from '@ocelot-social/ui'
+import { OsBadge, OsButton, OsCard, OsIcon } from '@ocelot-social/ui'
 import { iconRegistry } from '~/utils/iconRegistry'
 import gql from 'graphql-tag'
 import { mapGetters } from 'vuex'
@@ -222,6 +243,7 @@ export default {
     DatePicker,
     Editor,
     ImageUploader,
+    OsBadge,
     OsButton,
     OsCard,
     OsIcon,
@@ -516,7 +538,7 @@ export default {
     display: flex;
     justify-content: flex-end;
 
-    > .ds-chip {
+    > .os-badge {
       margin-top: -10px;
     }
   }
@@ -568,7 +590,7 @@ export default {
       margin: 0;
     }
 
-    > .ds-chip {
+    > .os-badge {
       align-self: flex-end;
       margin: $space-xx-small 0 $space-base;
       cursor: default;
diff --git a/webapp/components/Group/GroupForm.vue b/webapp/components/Group/GroupForm.vue
index 66a24c8ee..e71752042 100644
--- a/webapp/components/Group/GroupForm.vue
+++ b/webapp/components/Group/GroupForm.vue
@@ -17,10 +17,14 @@
           autofocus
           :placeholder="`${$t('group.name')} …`"
         />
-        <ds-chip size="base" :color="errors && errors.name ? 'danger' : 'medium'">
+        <os-badge
+          role="status"
+          aria-live="polite"
+          :variant="errors && errors.name ? 'danger' : undefined"
+        >
           {{ `${formData.name.length} / ${formSchema.name.min}–${formSchema.name.max}` }}
           <os-icon v-if="errors && errors.name" :icon="icons.warning" />
-        </ds-chip>
+        </os-badge>
 
         <!-- group Slug -->
         <ds-input
@@ -49,16 +53,17 @@
             {{ $t(`group.typesOptions.${groupType}`) }}
           </option>
         </select>
-        <ds-chip
-          size="base"
-          :color="errors && errors.groupType && formData.groupType === '' ? 'danger' : 'medium'"
+        <os-badge
+          role="status"
+          aria-live="polite"
+          :variant="errors && errors.groupType && formData.groupType === '' ? 'danger' : undefined"
         >
           {{ `${formData.groupType === '' ? 0 : 1} / 1` }}
           <os-icon
             v-if="errors && errors.groupType && formData.groupType === ''"
             :icon="icons.warning"
           />
-        </ds-chip>
+        </os-badge>
 
         <!-- goal -->
         <ds-input
@@ -83,10 +88,14 @@
           :hashtags="null"
           @input="updateEditorDescription"
         />
-        <ds-chip size="base" :color="errors && errors.description ? 'danger' : 'medium'">
+        <os-badge
+          role="status"
+          aria-live="polite"
+          :variant="errors && errors.description ? 'danger' : undefined"
+        >
           {{ `${descriptionLength} / ${formSchema.description.min}` }}
           <os-icon v-if="errors && errors.description" :icon="icons.warning" />
-        </ds-chip>
+        </os-badge>
 
         <!-- actionRadius -->
         <p class="ds-text select-label">
@@ -96,10 +105,11 @@
           v-model="formData.actionRadius"
           @change.native="changeActionRadius($event)"
         />
-        <ds-chip
-          size="base"
-          :color="
-            errors && errors.actionRadius && formData.actionRadius === '' ? 'danger' : 'medium'
+        <os-badge
+          role="status"
+          aria-live="polite"
+          :variant="
+            errors && errors.actionRadius && formData.actionRadius === '' ? 'danger' : undefined
           "
         >
           {{ `${formData.actionRadius === '' ? 0 : 1} / 1` }}
@@ -107,7 +117,7 @@
             v-if="errors && errors.actionRadius && formData.actionRadius === ''"
             :icon="icons.warning"
           />
-        </ds-chip>
+        </os-badge>
 
         <!-- location -->
         <location-select v-model="formData.locationName" />
@@ -125,10 +135,14 @@
             name="categoryIds"
             :existingCategoryIds="formData.categoryIds"
           />
-          <ds-chip size="base" :color="errors && errors.categoryIds ? 'danger' : 'medium'">
+          <os-badge
+            role="status"
+            aria-live="polite"
+            :variant="errors && errors.categoryIds ? 'danger' : undefined"
+          >
             {{ formData.categoryIds.length }} / 3
             <os-icon v-if="errors && errors.categoryIds" :icon="icons.warning" />
-          </ds-chip>
+          </os-badge>
         </div>
         <!-- submit -->
         <div class="buttons ds-mt-large ds-mb-large">
@@ -151,7 +165,7 @@
 </template>
 
 <script>
-import { OsButton, OsIcon } from '@ocelot-social/ui'
+import { OsBadge, OsButton, OsIcon } from '@ocelot-social/ui'
 import { iconRegistry } from '~/utils/iconRegistry'
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
 import { CATEGORIES_MIN, CATEGORIES_MAX } from '~/constants/categories.js'
@@ -173,6 +187,7 @@ export default {
     Editor,
     ActionRadiusSelect,
     LocationSelect,
+    OsBadge,
     OsButton,
     OsIcon,
   },
@@ -353,12 +368,23 @@ export default {
     margin: 0;
   }
 
-  > .ds-chip {
+  > .os-badge {
     align-self: flex-end;
     margin: $space-xx-small 0 $space-base;
     cursor: default;
   }
 
+  > div:not(.buttons) {
+    display: flex;
+    flex-direction: column;
+
+    > .os-badge {
+      align-self: flex-end;
+      margin: $space-xx-small 0 $space-base;
+      cursor: default;
+    }
+  }
+
   > .select-field {
     align-self: flex-end;
   }
diff --git a/webapp/components/Group/GroupMember.vue b/webapp/components/Group/GroupMember.vue
index ba46b4a98..108e5ce73 100644
--- a/webapp/components/Group/GroupMember.vue
+++ b/webapp/components/Group/GroupMember.vue
@@ -48,9 +48,9 @@
             {{ $t(`group.roles.${role}`) }}
           </option>
         </select>
-        <ds-chip v-else color="primary">
+        <os-badge v-else variant="primary">
           {{ $t(`group.roles.${scope.row.membership.role}`) }}
-        </ds-chip>
+        </os-badge>
       </template>
       <template #edit="scope">
         <os-button
@@ -83,7 +83,7 @@
   </div>
 </template>
 <script>
-import { OsButton, OsIcon } from '@ocelot-social/ui'
+import { OsBadge, OsButton, OsIcon } from '@ocelot-social/ui'
 import { iconRegistry } from '~/utils/iconRegistry'
 import { changeGroupMemberRoleMutation, removeUserFromGroupMutation } from '~/graphql/groups.js'
 import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
@@ -91,6 +91,7 @@ import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar
 export default {
   name: 'GroupMember',
   components: {
+    OsBadge,
     OsButton,
     OsIcon,
     ProfileAvatar,
diff --git a/webapp/components/Group/GroupTeaser.vue b/webapp/components/Group/GroupTeaser.vue
index 1fafc6bb7..e3125b0c9 100644
--- a/webapp/components/Group/GroupTeaser.vue
+++ b/webapp/components/Group/GroupTeaser.vue
@@ -30,17 +30,17 @@
       <footer class="footer">
         <div>
           <!-- group my role in group -->
-          <ds-chip v-if="group && group.myRole" color="primary">
+          <os-badge v-if="group && group.myRole" variant="primary">
             {{ group && group.myRole ? $t('group.roles.' + group.myRole) : '' }}
-          </ds-chip>
+          </os-badge>
           <!-- group type -->
-          <ds-chip color="primary">
+          <os-badge variant="primary">
             {{ group && group.groupType ? $t('group.types.' + group.groupType) : '' }}
-          </ds-chip>
+          </os-badge>
           <!-- group action radius -->
-          <ds-chip color="primary">
+          <os-badge variant="primary">
             {{ group && group.actionRadius ? $t('group.actionRadii.' + group.actionRadius) : '' }}
-          </ds-chip>
+          </os-badge>
         </div>
         <!-- group categories -->
         <div
@@ -70,7 +70,7 @@
             {{ $t('group.goal') }}
           </p>
           <div class="chip">
-            <ds-chip v-if="group && group.about">{{ group ? group.about : '' }}</ds-chip>
+            <os-badge v-if="group && group.about">{{ group.about }}</os-badge>
           </div>
         </div>
       </footer>
@@ -79,7 +79,7 @@
 </template>
 
 <script>
-import { OsCard, OsIcon } from '@ocelot-social/ui'
+import { OsBadge, OsCard, OsIcon } from '@ocelot-social/ui'
 import { iconRegistry } from '~/utils/iconRegistry'
 import Category from '~/components/Category'
 import GroupContentMenu from '~/components/ContentMenu/GroupContentMenu'
@@ -91,6 +91,7 @@ export default {
   components: {
     Category,
     GroupContentMenu,
+    OsBadge,
     OsCard,
     OsIcon,
   },
diff --git a/webapp/components/Hashtag/Hashtag.vue b/webapp/components/Hashtag/Hashtag.vue
index 9b3eb0028..09fdf9497 100644
--- a/webapp/components/Hashtag/Hashtag.vue
+++ b/webapp/components/Hashtag/Hashtag.vue
@@ -1,12 +1,15 @@
 <template>
-  <span class="ds-tag ds-tag-size-base ds-tag-medium hc-hashtag">
+  <os-badge shape="square" class="hc-hashtag">
     <nuxt-link :to="hashtagUrl">#{{ id }}</nuxt-link>
-  </span>
+  </os-badge>
 </template>
 
 <script>
+import { OsBadge } from '@ocelot-social/ui'
+
 export default {
   name: 'HcHashtag',
+  components: { OsBadge },
   props: {
     id: { type: String, required: true },
   },
diff --git a/webapp/components/PostTeaser/PostTeaser.vue b/webapp/components/PostTeaser/PostTeaser.vue
index 95d1bd674..1d131b23c 100644
--- a/webapp/components/PostTeaser/PostTeaser.vue
+++ b/webapp/components/PostTeaser/PostTeaser.vue
@@ -330,6 +330,7 @@ export default {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+    padding-bottom: 0 !important;
   }
 
   .content {
@@ -357,7 +358,7 @@ export default {
       z-index: $z-index-post-teaser-link;
     }
 
-    .ds-tag {
+    .os-badge {
       margin: 0;
       margin-right: $space-xx-small;
     }
diff --git a/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap b/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
index cbe142f70..f83598ad8 100644
--- a/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
+++ b/webapp/pages/groups/_id/__snapshots__/_slug.spec.js.snap
@@ -412,12 +412,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
                 group.roles.owner
               
-                <!---->
               </span>
             </div>
              
@@ -434,12 +433,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.types.closed
             
-                <!---->
               </span>
             </div>
              
@@ -456,12 +454,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.actionRadii.national
             
-                <!---->
               </span>
             </div>
              
@@ -494,7 +491,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -511,7 +508,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -547,10 +544,9 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-medium ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 Our children shall receive education for life.
-                <!---->
               </span>
             </div>
           </div>
@@ -1311,12 +1307,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.types.closed
             
-                <!---->
               </span>
             </div>
              
@@ -1333,12 +1328,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.actionRadii.national
             
-                <!---->
               </span>
             </div>
              
@@ -1371,7 +1365,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -1388,7 +1382,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -1424,10 +1418,9 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-medium ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 Our children shall receive education for life.
-                <!---->
               </span>
             </div>
           </div>
@@ -1817,12 +1810,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
                 group.roles.pending
               
-                <!---->
               </span>
             </div>
              
@@ -1839,12 +1831,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.types.closed
             
-                <!---->
               </span>
             </div>
              
@@ -1861,12 +1852,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.actionRadii.national
             
-                <!---->
               </span>
             </div>
              
@@ -1899,7 +1889,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -1916,7 +1906,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -1952,10 +1942,9 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-medium ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 Our children shall receive education for life.
-                <!---->
               </span>
             </div>
           </div>
@@ -2477,12 +2466,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
                 group.roles.usual
               
-                <!---->
               </span>
             </div>
              
@@ -2499,12 +2487,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.types.closed
             
-                <!---->
               </span>
             </div>
              
@@ -2521,12 +2508,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.actionRadii.national
             
-                <!---->
               </span>
             </div>
              
@@ -2559,7 +2545,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -2576,7 +2562,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -2612,10 +2598,9 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a close
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-medium ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 Our children shall receive education for life.
-                <!---->
               </span>
             </div>
           </div>
@@ -3532,12 +3517,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
                 group.roles.owner
               
-                <!---->
               </span>
             </div>
              
@@ -3554,12 +3538,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.types.public
             
-                <!---->
               </span>
             </div>
              
@@ -3576,12 +3559,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.actionRadii.interplanetary
             
-                <!---->
               </span>
             </div>
              
@@ -3614,7 +3596,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -3631,7 +3613,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -3648,7 +3630,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -4399,12 +4381,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.types.public
             
-                <!---->
               </span>
             </div>
              
@@ -4421,12 +4402,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.actionRadii.interplanetary
             
-                <!---->
               </span>
             </div>
              
@@ -4459,7 +4439,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -4476,7 +4456,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -4493,7 +4473,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -5208,12 +5188,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
                 group.roles.pending
               
-                <!---->
               </span>
             </div>
              
@@ -5230,12 +5209,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.types.public
             
-                <!---->
               </span>
             </div>
              
@@ -5252,12 +5230,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.actionRadii.interplanetary
             
-                <!---->
               </span>
             </div>
              
@@ -5290,7 +5267,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -5307,7 +5284,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -5324,7 +5301,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -6134,12 +6111,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
                 group.roles.usual
               
-                <!---->
               </span>
             </div>
              
@@ -6156,12 +6132,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.types.public
             
-                <!---->
               </span>
             </div>
              
@@ -6178,12 +6153,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.actionRadii.interplanetary
             
-                <!---->
               </span>
             </div>
              
@@ -6216,7 +6190,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -6233,7 +6207,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -6250,7 +6224,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a curre
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -7215,12 +7189,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
                 group.roles.owner
               
-                <!---->
               </span>
             </div>
              
@@ -7237,12 +7210,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.types.hidden
             
-                <!---->
               </span>
             </div>
              
@@ -7259,12 +7231,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.actionRadii.global
             
-                <!---->
               </span>
             </div>
              
@@ -7297,7 +7268,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -7314,7 +7285,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <span
@@ -7344,7 +7315,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -7380,10 +7351,9 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-medium ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 Investigative journalists share ideas and insights and can collaborate.
-                <!---->
               </span>
             </div>
           </div>
@@ -8272,12 +8242,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
                 group.roles.usual
               
-                <!---->
               </span>
             </div>
              
@@ -8294,12 +8263,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.types.hidden
             
-                <!---->
               </span>
             </div>
              
@@ -8316,12 +8284,11 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-primary ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-primary-contrast)] bg-[var(--color-primary)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 
               group.actionRadii.global
             
-                <!---->
               </span>
             </div>
              
@@ -8354,7 +8321,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -8371,7 +8338,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <span
@@ -8401,7 +8368,7 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
                 align="center"
               >
                 <span
-                  class="ds-tag ds-tag-size-base ds-tag-medium category-tag has-tooltip"
+                  class="category-tag os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[0.25em] category-tag has-tooltip"
                   data-original-title="null"
                 >
                   <!---->
@@ -8437,10 +8404,9 @@ exports[`GroupProfileSlug given a puplic group – "yoga-practice" given a hidde
               class="chip"
             >
               <span
-                class="ds-chip ds-chip-size-base ds-chip-medium ds-chip-round"
+                class="os-badge inline-flex w-fit items-center gap-[0.25em] font-semibold text-[var(--color-default-contrast)] bg-[var(--color-default)] text-[0.75rem] py-[0.2em] px-[0.8em] rounded-[2em]"
               >
                 Investigative journalists share ideas and insights and can collaborate.
-                <!---->
               </span>
             </div>
           </div>
diff --git a/webapp/pages/groups/_id/_slug.vue b/webapp/pages/groups/_id/_slug.vue
index 6f8823b64..b67b887eb 100644
--- a/webapp/pages/groups/_id/_slug.vue
+++ b/webapp/pages/groups/_id/_slug.vue
@@ -92,9 +92,9 @@
                 {{ $t('group.role') }}
               </p>
               <div class="chip" align="center">
-                <ds-chip color="primary">
+                <os-badge variant="primary">
                   {{ group && group.myRole ? $t('group.roles.' + group.myRole) : '' }}
-                </ds-chip>
+                </os-badge>
               </div>
             </template>
             <!-- group type -->
@@ -102,20 +102,20 @@
               {{ $t('group.type') }}
             </p>
             <div class="chip" align="center">
-              <ds-chip color="primary">
+              <os-badge variant="primary">
                 {{ group && group.groupType ? $t('group.types.' + group.groupType) : '' }}
-              </ds-chip>
+              </os-badge>
             </div>
             <!-- group action radius -->
             <p class="ds-text ds-text-soft ds-text-size-small centered-text hyphenate-text">
               {{ $t('group.actionRadius') }}
             </p>
             <div class="chip" align="center">
-              <ds-chip color="primary">
+              <os-badge variant="primary">
                 {{
                   group && group.actionRadius ? $t('group.actionRadii.' + group.actionRadius) : ''
                 }}
-              </ds-chip>
+              </os-badge>
             </div>
             <div class="ds-my-x-small"></div>
           </div>
@@ -165,7 +165,7 @@
               </p>
               <div class="ds-my-xx-small"></div>
               <div class="chip" align="center">
-                <ds-chip>{{ group ? group.about : '' }}</ds-chip>
+                <os-badge>{{ group.about }}</os-badge>
               </div>
             </div>
           </template>
@@ -293,7 +293,7 @@
 </template>
 
 <script>
-import { OsButton, OsCard, OsIcon, OsSpinner } from '@ocelot-social/ui'
+import { OsBadge, OsButton, OsCard, OsIcon, OsSpinner } from '@ocelot-social/ui'
 import { iconRegistry } from '~/utils/iconRegistry'
 import uniqBy from 'lodash/uniqBy'
 import { profilePagePosts } from '~/graphql/PostQuery'
@@ -330,6 +330,7 @@ import GetCategories from '~/mixins/getCategoriesMixin.js'
 
 export default {
   components: {
+    OsBadge,
     OsCard,
     OsButton,
     OsIcon,