Bridge Training
UI Bridge

Scoring

Atom for displaying a scoring mode.

Import from @workspace/ui-bridge/scoring/*.

The input lives on the ScoringSelect page.

ScoringDisplay

A scoring mode as its translated label (default), its icon, both, or a pill: icon and label in a chip tinted with the mode color, like the team pill of PlayerTeamDisplay. The icon shows what is counted: a percentage for matchpoints, a team match for IMPs, a dashed circle when unset. notation="short" shows the short form. undefined reads as UNSET: the label spells it out, and the pill renders nothing so a caller can gate its block.

import { ScoringDisplay } from '@workspace/ui-bridge/scoring/scoring-display';

<ScoringDisplay scoring="TPP" />
<ScoringDisplay scoring="IMP" variant="icon+label" />
<ScoringDisplay scoring={deal.scoring} variant="pill" />

light

icon

label

NoneMatchpointsIMPs

icon+label

NoneMatchpointsIMPs

pill

MatchpointsIMPs

icon+label · French

AucunTournoi par pairesIMPs

notation · short

-MPsIMPs

dark

icon

label

NoneMatchpointsIMPs

icon+label

NoneMatchpointsIMPs

pill

MatchpointsIMPs

icon+label · French

AucunTournoi par pairesIMPs

notation · short

-MPsIMPs

Props

Prop

Type