Bridge Training
Bridge ReactMisc

Labels & Badges

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

Import from @workspace/bridge-react/misc/*.

ScoringLabel

Displays a translated label for a scoring mode.

import { ScoringLabel } from '@workspace/bridge-react/misc/scoring-label';

<ScoringLabel scoring="TPP" />

Demo

Total Point Pairs

Props

Prop

Type

VulnerabilityLabel

Displays a translated label for vulnerability.

import { VulnerabilityLabel } from '@workspace/bridge-react/misc/vulnerability-label';

<VulnerabilityLabel vulnerability="NS" />

Demo

None vulnerable

Props

Prop

Type

TeachingModeLabel

Displays a translated label for a teaching mode.

import { TeachingModeLabel } from '@workspace/bridge-react/misc/teaching-mode-label';

<TeachingModeLabel mode="auction" />

Demo

Allow auction

Props

Prop

Type

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

Prop

Type

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

Prop

Type

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

Prop

Type

On this page