Badge

Materiał odziedziczony z PoC. Działający przykład pokazuje stan kodu, nie zatwierdzenie nowej identyfikacji. Rozstrzygnięcia warsztatów mają pierwszeństwo.

Examples

NeutralBrandSuccessWarningDangerInfo

Warianty

import { Badge } from "@polisoteka/design-ui"

export function BadgeVariants() {
  return (
    <div className="flex flex-wrap gap-inline-sm">
      <Badge variant="neutral">Neutral</Badge>
      <Badge variant="brand">Brand</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="danger">Danger</Badge>
      <Badge variant="info">Info</Badge>
    </div>
  )
}

export default BadgeVariants

Usage

Używaj Badge, żeby oznaczyć status pojedynczej rzeczy (polisy, oferty, strony treści) krótkim słowem — success/warning/danger/info dla statusów faktycznie stanowych (aktywna/wygasa/anulowana/informacyjna), brand dla wyróżnienia bez konotacji statusu (np. „Nowość”), neutral jako domyślny.

Nie używaj Badge jako przycisku — to element informacyjny (<span>), bez roli interaktywnej i bez onClick; jeśli potrzebujesz klikalnego filtra wyglądającego jak badge, to inny komponent (poza obecnym zakresem ui/, opisz w briefie konkretnego szablonu).

Content

API

Nazwa	Typ	Wymagany	Domyślnie	Opis
variant	'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info'	nie	'neutral'	Wariant wizualny.

Dostępność

Zapewnione przez komponent: brak roli interaktywnej (poprawnie — to nie jest przycisk).

Sprawdź przy użyciu: gdy Badge niesie JEDYNĄ informację o statusie (np. tylko kropka koloru bez tekstu), upewnij się, że treść nazywa status słownie — sam kolor nie może być jedynym nośnikiem informacji (WCAG 1.4.1), patrz Dostępność → Baseline.

Related

• Card — typowe miejsce użycia w CardHeader.
• Fundamenty → Kolor — pary color.status.*.bg/fg.

Brief do wykonania

@todo(badge): wykonać poniższy brief, przedstawić rezultat i dowody odbioru. Usunięcie znacznika nie jest wykonaniem zadania.

• Zakres: Rozróżniaj status oferty od dekoracyjnej etykiety; status nie zależy od koloru, nie oznacza rekomendacji bez podstawy.
• Konwencja: najpierw reguła lub gotowe zastosowanie, potem przykład i kontrprzykład, następnie granice oraz sposób sprawdzenia. Nie zastępuj materiału opisem planu jego przygotowania.
• Źródła: platforma marki; zaakceptowane decyzje warsztatów. Zastane demo lub deklaracja PoC nie zatwierdzają nowej reguły.
• Powiązania: Tokeny i zależności.
• Granica swobody: możesz redagować i pokazywać istniejące ustalenia. Nową obietnicę, wybór wizualny, dane firmy i twierdzenie produktowe przedstaw do decyzji; nie uzupełniaj z pamięci.

Weryfikacja

Sprawdź rzeczywisty render i użycie wspólnego kodu, desktop/mobile, jasny/ciemny tryb oraz właściwe konteksty portali. Bramka techniczna: pnpm design:check; przed wydaniem także pnpm design:audit. Sam opis ani zielony test innego demo nie jest dowodem odbioru tego elementu.