LangSwitch

Frames · src/components/LangSwitch/LangSwitch.tsx

Switches the page's language.

href must be the SAME page in the other language. A switch that lands on the home page is the border this company is named after, reversed - it takes something away for choosing a language. So a language with no counterpart for this page renders as unavailable, with a reason, and never as a link home.

Two languages fit on a line; twelve do not, and a site that will carry twelve should not be laid out as though it carries two. Past inlineUpTo this becomes a disclosure rather than wrapping.

Each label is marked with its own lang, so the browser sets it in the right script, and RTL codes get dir without the consumer remembering to.

Import

import { LangSwitch } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
langs	LangOption[]
current	string
inlineUpTo	number	Up to this many render inline; more become a disclosure. Three by default.
label	React.ReactNode
missingLabel	string
className	string
onChange	(lang: LangOption) => void

Exported types

LangOption