Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { LanguageToggle } from "@hua-labs/hua";

: ko

: en

: ko

HUA Labs

variant"button" | "icon" | "dropdown""button"docs:components.languageToggle.props.variant
size"sm" | "md" | "lg""md"docs:components.languageToggle.props.size
showLabelbooleanfalsedocs:components.languageToggle.props.showLabel
languagesArray<{ code: string; name: string; flag?: string }>-docs:components.languageToggle.props.languages
currentLanguagestring"ko"docs:components.languageToggle.props.currentLanguage
onLanguageChange(language: string) => void-docs:components.languageToggle.props.onLanguageChange
classNamestring-docs:components.languageToggle.props.className

docs:common.basicUsagetsx
1import { LanguageToggle } from '@hua-labs/hua';
2import { useState } from 'react';
3 
4const [lang, setLang] = useState("ko");
5 
6// Button style (click to cycle through languages)
7<LanguageToggle
8  currentLanguage={lang}
9  onLanguageChange={setLang}
10/>
docs:components.languageToggle.demo.dropdownFormtsx
1// Dropdown with all languages visible
2<LanguageToggle
3  variant="dropdown"
4  showLabel
5  currentLanguage={lang}
6  onLanguageChange={setLang}
7/>
docs:components.languageToggle.demo.iconFormtsx
1// Icon only with dropdown menu
2<LanguageToggle
3  variant="icon"
4  currentLanguage={lang}
5  onLanguageChange={setLang}
6/>
docs:components.languageToggle.demo.customLanguageListtsx
1<LanguageToggle
2  variant="dropdown"
3  showLabel
4  languages={[
5    { code: "ko", name: "한국어", flag: "🇰🇷" },
6    { code: "en", name: "English", flag: "🇺🇸" },
7  ]}
8  currentLanguage={lang}
9  onLanguageChange={setLang}
10/>

  • • 🇰🇷 ko - 한국어
  • • 🇺🇸 en - English
  • • 🇯🇵 ja - 日本語
  • • 🇨🇳 zh - 中文

  • •docs:common.accessibility.focusRing: docs:components.languageToggle.accessibility.focusRingDesc
  • •docs:components.languageToggle.accessibility.clickTarget: docs:components.languageToggle.accessibility.clickTargetDesc
  • •docs:components.languageToggle.accessibility.outsideClick: docs:components.languageToggle.accessibility.outsideClickDesc
ThemeToggleScrollToTop