Componentes

Botões de Idioma

Três idiomas: PT / EN / ES. Estado active: bg teal, texto branco + bandeira. Inactive: bg sutil com borda. O app renderiza a variante light na TopBar e a variante dark nos contextos de ScreenSaver / Onboarding (painel direito). Alterne o preview para comparar.

Seletor de idioma

BG active
--color-accent
Cor active
--color-surface · fw:700
BG inactive light
--color-surface · 92%
BG inactive dark
white · 10%
Cor inactive light
slate-600 · fw:500
Cor inactive dark
white · 65%
Borda light
1.5px · --color-border-strong
Borda dark
1.5px · white · 25%
Radius
--radius-md · 10px
Bandeira
22×16 · rounded 3px
Área de toque
≥ 48px de altura (kiosk)
Uso
---
import LanguageButton from '@/components/kiosk/LanguageButton.astro';
---

{/* Superfície clara (TopBar) — active = idioma atual */}
<LanguageButton code="pt" active surface="light" size="md" />
<LanguageButton code="en"        surface="light" size="md" />
<LanguageButton code="es"        surface="light" size="md" />

{/* Superfície escura (ScreenSaver · painel direito do Onboarding) */}
<LanguageButton code="pt" active surface="dark" size="md" />
<LanguageButton code="en"        surface="dark" size="md" />
<LanguageButton code="es"        surface="dark" size="md" />

{/* Preview compacto (docs / mobile) — size sm */}
<LanguageButton code="pt" active surface="light" size="sm" />
Props
  • code obrigatório
    Tipo
    'pt' | 'en' | 'es'
    Padrão
    —
    Desc
    Idioma que este botão representa. Define o label (PT/EN/ES) e o asset da bandeira.
  • active
    Tipo
    boolean
    Padrão
    false
    Desc
    True quando este é o idioma selecionado no momento (preenchimento teal, label branco, sem borda).
  • surface
    Tipo
    'light' | 'dark'
    Padrão
    'light'
    Desc
    Fundo sobre o qual o botão assenta — controla o estilo inativo.
  • size
    Tipo
    'sm' | 'md'
    Padrão
    'md'
    Desc
    md = kiosk completo (1920px) · sm = preview do DS / mobile.
  • class
    Tipo
    string
    Padrão
    —
    Desc
    Classes extras anexadas ao elemento raiz.