Badge

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/, zgłoś w S-INWENTARZ).

Content

@todo(S-WYWIAD): słownik dozwolonych etykiet statusu per kontekst (polisa, treść, proces) — z wywiadu z Human.

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.