Components

Balance Pill

TopBar indicator that appears once the user's card is read. Two value states: OK (green) and Low (red, below R$ 4,70, the ticket price). Ships on both light screens and the dark-panel screens (onboarding, value-selection, screen-saver). Flip the stage above to compare.

Balance states

Balance R$ 50,00
Balance R$ 2,50
Low balance
Balance R$ 50,00
Balance R$ 2,50
Low balance
BG light
--color-surface · 95%
BG dark
white · 6%
Border light
1.5px · --color-border
Border dark
1.5px · white · 15%
Radius
--radius-md · 10px
Label
11px · 500 · --color-text-secondary
Value OK
18px · 800 · --color-primary
Value Low
18px · 800 · --color-error
Usage
---
import BalancePill from '@/components/kiosk/BalancePill.astro';
---

{/* OK state — above ticket price (R$ 4,70) */}
<BalancePill value="R$ 50,00" surface="light" state="ok" size="md" />
<BalancePill value="R$ 50,00" surface="dark"  state="ok" size="md" />

{/* Low state — below ticket price, app renders a warning alongside */}
<BalancePill value="R$ 2,50" surface="light" state="low" size="md" />
<BalancePill value="R$ 2,50" surface="dark"  state="low" size="md" />

{/* Custom label (defaults to "Available balance") */}
<BalancePill label="Saldo"  value="R$ 50,00" surface="light" />
Props
  • value required
    Type
    string
    Default
    —
    Desc
    Pre-formatted monetary value — e.g. `"R$ 50,00"`. Uses tabular-nums so digits align.
  • label
    Type
    string
    Default
    'Available balance'
    Desc
    Uppercase label above the value. Kept short; truncation is consumer responsibility.
  • surface
    Type
    'light' | 'dark'
    Default
    'light'
    Desc
    Background the pill sits on — controls the inactive border + backdrop blur.
  • state
    Type
    'ok' | 'low'
    Default
    'ok'
    Desc
    ok → green value; low → red value (caller renders the "Low balance" warning alongside).
  • size
    Type
    'sm' | 'md'
    Default
    'md'
    Desc
    md = kiosk full (label 13 · value 22) · sm = compact preview (label 11 · value 18).
  • class
    Type
    string
    Default
    —
    Desc
    Extra classes appended to the root element.