Bid Trade
Mode:

Notifications

Design System Demo

Showcase of all reusable components

Quick Navigation

Badges Buttons Cards Status Widgets Alerts Forms Toggles & Mode Selectors Tooltips & Help Icons Position Components Modals Usage Examples

Badges

Basic Badges

Success Error Warning Info Neutral Primary Secondary

Sizes

XS Small Medium Large

Status Badges

Connected Disconnected Connecting

Trading Badges

Paper Live +$123.45 $-50.25 $0.00

Buttons

Button Styles

Button Sizes

Button States

Button Group

Cards

Total P&L
$1,234.56
Today
Open Positions
5
Active trades
Win Rate
68%
Last 30 days

Status Widgets

Reusable status monitoring widgets with auto-refresh

TWS Connection Status

Connections are created on-demand per-strategy based on trading mode

Strategy Session Status

Strategies create on-demand connections to execute trades

TWS Connection (Compact)

Strategy Session (Compact)

Alerts

Success

System is running normally

Info

This is some information

Warning

Rate limit approaching

Error

Connection failed

Form Components

Text Inputs

Selects and Toggles

Toggles & Mode Selectors

Interactive toggle switches and mode selectors for switching between states

Basic Toggle Switch

Toggle Colors

Trading Mode Toggle (Global)

Used in navbar to switch which account you're TRADING with

Mode:

Use case: Global trading mode that persists across pages

Behavior: Requires confirmation for live mode, reloads page after switching

Button Group (View Toggle)

Used for switching which account's DATA you're viewing (page-local)

Use case: Page-local view toggle (e.g., Risk Management page)

Behavior: Only changes which data is displayed, doesn't affect trading

Tooltips & Help Icons

Contextual help and information tooltips

Basic Tooltips

Tooltip Positions

Info Icon with Tooltip

View Account Data:

Use case: Clarify distinction between view toggles and trading toggles

Pattern: Label + Icon + Tooltip for contextual help

Tooltip Colors

Multi-line Tooltip

Tooltip with HTML Content

For complex tooltips, use a custom implementation:

Custom Tooltip

You can include any HTML content here, including lists, links, or formatted text.

Position Components

AAPL

Paper
Weekend Warrior
Quantity: 100
Avg Cost: $150.25
Current: $155.75
Market Value: $15575.00
Profit/Loss
+$550.00
Return
+3.66%

GOOGL

Live
Quantity: 50
Avg Cost: $140.50
Current: $138.25
Market Value: $6912.50
Profit/Loss
$-112.50
Return
-1.60%

TSLA

Paper
Quantity: 25
Avg Cost: $245.00
Current: $245.00
Market Value: $6125.00
Profit/Loss
$0.00
Return
0.00%

Position Summaries

AAPL 100 shares
+$550.00
+3.66%
+$550.00
GOOGL 50 shares
$-112.50
-1.60%
$-112.50
TSLA 25 shares
$0.00
0.00%
$0.00

Modals

Modal Examples

Example Modal

This is a demo modal with some content.

You can put any content here - forms, lists, images, etc.

Confirm Action

Are you sure you want to proceed with this action?

Usage Examples

Badge Example

{% from "components/badge.html" import badge %}

{{ badge("Success", type="success") }}
{{ badge("Error", type="error", size="lg") }}

Trading Mode Toggle Example

HTML structure for navbar trading mode toggle:

<!-- Trading Mode Switcher -->
<div class="flex items-center gap-2 mr-4">
    <span class="text-sm opacity-70">Mode:</span>
    <div class="form-control">
        <label class="label cursor-pointer gap-2">
            <span class="label-text" id="trading-mode-label">Paper</span>
            <input type="checkbox" class="toggle toggle-error"
                   id="trading-mode-toggle"
                   onchange="switchTradingMode()">
        </label>
    </div>
</div>

JavaScript for handling mode switching:

async function switchTradingMode() {
    const toggle = document.getElementById('trading-mode-toggle');
    const newMode = toggle.checked ? 'live' : 'paper';

    // Confirmation for live mode
    if (newMode === 'live') {
        const confirmed = confirm('⚠️ WARNING: Switching to LIVE TRADING!');
        if (!confirmed) {
            toggle.checked = false;
            return;
        }
    }

    const response = await fetch(`/api/trading-mode?mode=${newMode}`, {
        method: 'POST'
    });

    if (response.ok) {
        setTimeout(() => window.location.reload(), 2000);
    }
}

View Toggle with Tooltip Example

Pattern for page-local view toggles with contextual help:

<!-- View Account Data Toggle -->
<div class="mb-6 flex items-center gap-3">
    <span class="text-sm font-semibold">View Account Data:</span>

    <!-- Button group for switching views -->
    <div class="join">
        <button class="btn btn-sm join-item trading-mode-btn active"
                data-mode="paper">Paper</button>
        <button class="btn btn-sm join-item trading-mode-btn"
                data-mode="live">Live</button>
    </div>

    <!-- Info icon with tooltip -->
    <div class="tooltip tooltip-right"
         data-tip="These buttons switch which account's DATA you're viewing on this page. To change which account you're TRADING with, use the toggle in the top navbar.">
        <svg xmlns="http://www.w3.org/2000/svg"
             class="h-5 w-5 opacity-70 cursor-help"
             fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round"
                  stroke-width="2"
                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
    </div>
</div>

Basic Tooltip Example

<!-- Basic tooltip -->
<div class="tooltip" data-tip="This is a tooltip">
    <button class="btn">Hover me</button>
</div>

<!-- Tooltip positions -->
<div class="tooltip tooltip-top" data-tip="Top">...</div>
<div class="tooltip tooltip-right" data-tip="Right">...</div>
<div class="tooltip tooltip-bottom" data-tip="Bottom">...</div>
<div class="tooltip tooltip-left" data-tip="Left">...</div>

<!-- Tooltip colors -->
<div class="tooltip tooltip-primary" data-tip="Primary">...</div>
<div class="tooltip tooltip-success" data-tip="Success">...</div>
<div class="tooltip tooltip-error" data-tip="Error">...</div>