Components

Language Buttons

Three languages: PT / EN / ES. Active state: teal bg, white text + flag. Inactive: subtle bg with border. The app renders light variant on TopBar and dark variant on ScreenSaver / Onboarding (right-panel) contexts. Flip the stage to compare.

Language selector

Active BG
--color-accent
Active color
--color-surface · fw:700
Inactive BG light
--color-surface · 92%
Inactive BG dark
white · 10%
Inactive color light
slate-600 · fw:500
Inactive color dark
white · 65%
Border light
1.5px · --color-border-strong
Border dark
1.5px · white · 25%
Radius
--radius-md · 10px
Flag
22×16 · rounded 3px
Touch target
≥ 48px height (kiosk)
Usage
---
import LanguageButton from '@/components/kiosk/LanguageButton.astro';
---

{/* Light surface (TopBar) — active = current language */}
<LanguageButton code="pt" active surface="light" size="md" />
<LanguageButton code="en"        surface="light" size="md" />
<LanguageButton code="es"        surface="light" size="md" />

{/* Dark surface (ScreenSaver · Onboarding right-panel) */}
<LanguageButton code="pt" active surface="dark" size="md" />
<LanguageButton code="en"        surface="dark" size="md" />
<LanguageButton code="es"        surface="dark" size="md" />

{/* Compact preview (docs / mobile) — size sm */}
<LanguageButton code="pt" active surface="light" size="sm" />
Props
  • code required
    Type
    'pt' | 'en' | 'es'
    Default
    —
    Desc
    Language this button represents. Drives label (PT/EN/ES) and flag asset.
  • active
    Type
    boolean
    Default
    false
    Desc
    True when this is the currently-selected language (teal fill, white label, no border).
  • surface
    Type
    'light' | 'dark'
    Default
    'light'
    Desc
    Background the button sits on — controls the inactive styling.
  • size
    Type
    'sm' | 'md'
    Default
    'md'
    Desc
    md = kiosk full (1920px) · sm = DS preview / mobile.
  • class
    Type
    string
    Default
    —
    Desc
    Extra classes appended to the root element.