Components

TopBar

Position: fixed top, z-index 100, transparent background. LEFT: URBS logo + balance pill. RIGHT: language buttons (PT/EN/ES) + exit button. Light surface for most screens, dark surface for full-dark states (ScreenSaver / ExitRemoveCard).

TopBar surfaces

URBS
Balance R$ 50,00
URBS
Balance R$ 50,00
Position
fixed top 0 · z-100
Padding
clamp 14-24px · 20-48px
Background
transparent (on screen BG)
Logo
urbs-logo · h:44px
Balance label
"Available balance" · uppercase 11-13px
Balance value
15-22px · fw:800 · tabular-nums
Lang button (active)
bg #00B4AE · fw:700 · no border
Lang button size
min-h:48px · radius 10
Lang inactive (light)
bg white 92% · 1.5px #C8CDD5
Lang inactive (dark)
bg white 10% · 1.5px white 25%
Exit button
bg #1A2332 · white text · fw:700
Exit icon
right-from-bracket · 12-17px
Dark-surface note
Exit hidden on ScreenSaver · ExitRemoveCard
Usage
---
import KioskButton from '@/components/kiosk/Button.astro';
import KioskIcon   from '@/components/icons/KioskIcon.astro';
---

{/* Light surface (TopBar on most screens) */}
<KioskButton variant="primary" size="md" label="Exit">
  Exit
  <KioskIcon slot="trailing" name="right-from-bracket" size={16} />
</KioskButton>

{/* Dark surface (ScreenSaver / ExitRemoveCard wrapper) */}
<KioskButton variant="primary-dark" size="md" label="Exit">
  Exit
  <KioskIcon slot="trailing" name="right-from-bracket" size={16} />
</KioskButton>

{/* Secondary action — ghost on light / dark surfaces */}
<KioskButton variant="ghost-light" size="md">Skip</KioskButton>
<KioskButton variant="ghost-dark"  size="md">Skip</KioskButton>
Props
  • variant
    Type
    'primary' | 'primary-dark' | 'ghost-light' | 'ghost-dark'
    Default
    'primary'
    Desc
    Navy fill for TopBar/Exit; dark variant adds a subtle border to read over dark panels.
  • size
    Type
    'sm' | 'md'
    Default
    'md'
    Desc
    md = kiosk full (min-h touch 48px · 17px text) · sm = compact preview (40px · 14px).
  • type
    Type
    'button' | 'submit' | 'reset'
    Default
    'button'
    Desc
    Native button `type` attribute.
  • label
    Type
    string
    Default
    —
    Desc
    Accessible label (maps to `aria-label`).
  • class
    Type
    string
    Default
    —
    Desc
    Extra classes appended to the root element.
  • slot: leading slot
    Type
    —
    Default
    —
    Desc
    Leading icon slot.
  • slot: (default) slot
    Type
    —
    Default
    —
    Desc
    Button label / children.
  • slot: trailing slot
    Type
    —
    Default
    —
    Desc
    Trailing icon slot.