Bridge Training
Bridge ReactMisc

Labels & Badges

Translated display labels and badge wrappers for scoring, vulnerability, and teaching mode.

Import labels from @workspace/bridge-react/labels/*, badges from @workspace/bridge-react/misc/*.

i18n Strategy

All label and badge components translate bridge domain values internally via useBridgeLabels() — no external label props needed. Labels are resolved from the nearest BridgeLabelsProvider (or fall back to engine defaults). Only UI-level text (form labels, placeholders) is passed as props.

Scoring

Displays a translated label for a scoring mode.

import { Scoring } from '@workspace/bridge-react/labels/scoring';

<Scoring scoring="TPP" />

Demo

Total Point Pairs

Props

Vulnerability

Displays a translated label for vulnerability.

import { Vulnerability } from '@workspace/bridge-react/labels/vulnerability';

<Vulnerability vulnerability="NS" />

Demo

None vulnerable

Props

TeachingMode

Displays a translated label for a teaching mode.

import { TeachingMode } from '@workspace/bridge-react/labels/teaching-mode';

<TeachingMode mode="auction" />

Demo

Allow auction

Props

ScoringBadge

Badge wrapper around ScoringLabel with variant styling. Shows a Badge for IMP/TPP and "-" for UNSET/undefined.

import { ScoringBadge } from '@workspace/bridge-react/misc/scoring-badge';

<ScoringBadge scoring="IMP" />
<ScoringBadge scoring="TPP" />
<ScoringBadge scoring={undefined} />

Demo

Props

VulnerabilityBadge

Color-coded vulnerability display. Green for NONE, red for ALL, orange for NS/EW, "-" for UNSET/undefined.

import { VulnerabilityBadge } from '@workspace/bridge-react/misc/vulnerability-badge';

<VulnerabilityBadge vulnerability="NONE" />
<VulnerabilityBadge vulnerability="ALL" />
<VulnerabilityBadge vulnerability={undefined} />

Demo

None vulnerable

Props

TeachingModeBadge

Teaching mode display with safe parsing from unknown input. Handles null/undefined to "-", invalid strings to raw text fallback.

import { TeachingModeBadge } from '@workspace/bridge-react/misc/teaching-mode-badge';

<TeachingModeBadge teaching="auction" />
<TeachingModeBadge teaching={null} />

Demo

Allow auction

Props

On this page