Brand components
Language switch
EN · VI switch; the current locale in ink 700, the other a real link that keeps the hash and ?mode. No flags.
Preview
ENVI
Install
bash
npx shadcn add @eloquent/language-switchUsage
tsx
import { LanguageSwitch } from "@/components/ui/language-switch";
<LanguageSwitch locale="en" label="Language" hrefFor={(locale) => `/${locale}/work`} />States
| State | Treatment |
|---|---|
| Current | Ink, Barlow 700, aria-current="true", not a link |
| Other | Halftone, a real link to the same page in that locale; keeps the hash and ?mode |
| Focus-visible | 2px ink outline with a 2px offset |
divider={false} | No hairline on the left |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves to the other locale's link (the current one is not a link) |
| Enter | Opens the same page in that locale |
Vietnamese
ENVI
Ink adaptation
Brand item with no upstream. No flags and no colour: weight and ink against halftone mark the current edition. hrefFor runs where the switch renders (server-safe); a small client link adds the current hash and ?mode after hydration.