Bid

Import from @workspace/bridge-react/bid/bid-display, @workspace/bridge-react/bid/bid-button, @workspace/bridge-react/bid/bid-pad, or @workspace/bridge-react/bid/bid-suit-display.

BidDisplay

Renders a bid as text with suit icon. Handles special bids (Pass, X, XX, Alert) and regular bids (level + suit).

import { BidDisplay } from '@workspace/bridge-react/bid/bid-display';

<BidDisplay bid="1NT" />
<BidDisplay bid="4S" />
<BidDisplay bid="Pass" />

Demo

1NT

object

Props

Prop

Type

BidButton

Styled button for displaying or selecting a bid. Automatically applies colors based on bid type (pass = green, double = red, suits = colored, etc.).

import { BidButton } from '@workspace/bridge-react/bid/bid-button';

<BidButton bid="Pass" onClick={() => handleBid('Pass')} />
<BidButton bid="3H" compact />
<BidButton bid="X" disabled />

Demo

object

Props

Prop

Type

getBidVariant

Utility function to determine the style variant for a bid.

import { getBidVariant } from '@workspace/bridge-react/bid/bid-button';

getBidVariant('Pass');  // 'pass'
getBidVariant('3H');    // 'hearts'
getBidVariant('1NT');   // 'notrump'
getBidVariant('X');     // 'double'

BidPad

Controlled bid selection pad. Displays all possible bids in a grid with special bids (Pass, X, XX, Alert) on top.

import { BidPad } from '@workspace/bridge-react/bid/bid-pad';

<BidPad
  onBidSelect={(bid) => console.log(bid)}
  isBidValid={(bid) => true}
/>

import { BidSuitDisplay } from '@workspace/bridge-react/bid/bid-suit-display';

<BidSuitDisplay bidSuit="S" />
<BidSuitDisplay bidSuit="NT" noTrumpLabel="SA" />

Demo

object

BidSequenceInput

Compound component for displaying a sequence of bid chips in a grid layout, with an optional undo button. Shows an empty message when the sequence is empty.

Import from @workspace/bridge-react/bid/bid-sequence-input.

import { BidSequenceInput } from '@workspace/bridge-react/bid/bid-sequence-input';

<BidSequenceInput isEmpty={bids.length === 0} emptyMessage="No bids yet" onUndo={handleUndo}>
  {bids.map((bid) => (
    <BidSequenceInput.Chip key={bid} bid={bid} />
  ))}
</BidSequenceInput>

Compound API

Component	Description
`BidSequenceInput`	Root container with grid layout, undo button, and empty state
`BidSequenceInput.Chip`	Displays a single bid as a compact, disabled BidButton

Props

Prop	Type	Description
`children`	`ReactNode`	Bid chips to display in the grid
`onUndo`	`() => void`	Optional callback for the undo button (button hidden when omitted)
`emptyMessage`	`string`	Message shown when `isEmpty` is true
`isEmpty`	`boolean`	Whether the sequence is empty
`className`	`string`	Additional CSS classes

useBidPadFlags

Hook that computes bidding pad state flags from the current auction sequence and dealer.

Import from @workspace/bridge-react/bid/useBidPadFlags.

import { useBidPadFlags } from '@workspace/bridge-react/bid/useBidPadFlags';

const { isEmpty, isComplete, canDouble, canRedouble, lastContractBid } = useBidPadFlags(sequence, dealer);

Prop

Type

Constants

Export	Description
`BID_LEVELS`	Readonly array `[1, 2, 3, 4, 5, 6, 7]`
`BID_SUITS`	Readonly array `['NT', 'S', 'H', 'D', 'C']`
`SPECIAL_BIDS`	Readonly array `['Pass', 'X', 'XX', 'Alert']`
`DEFAULT_BID_VARIANT_CLASSES`	Default Tailwind classes per bid variant

On this page