Locale Lang Toggle

Connect to Framer Locale for 2-language

locale setting Style - Solid / Floating and glass Overview Locale Language Toggle is a code component that integrates seamlessly with Framer's native localization feature. This toggle uses Framer's built-in Locale API, automatically syncing with your existing locale setup. No configuration per page, no manual URL mapping — just one component that works everywhere. Why This Component This component gives you independent color customization for each style. Customize Glass colors without affecting Solid or Floating — complete design freedom across every variant. Features Independent color palettes per style — a unique feature for true design flexibility Direct Framer Locale integration — no per-page setup 80+ country flags auto-displayed Three customizable styles: Glass, Solid, Floating Three display modes: Flag + Text, Flag Only, Text Only Smooth spring animation Mobile responsive (44px minimum touch target) ARIA-compliant for accessibility How It Works Place the component on your page Enter your Locale A ID (e.g., en) Enter your Locale B ID (e.g., es) Done — the toggle syncs with Framer's active locale automatically Requirements Framer plan with Locales enabled (Basic or higher). Works with both manual translations and Auto Translate. Setup Tip For Glass and Floating styles, set the parent frame's Overflow to "Visible" so shadows display correctly.

Connect to Framer Locale for 2-language