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.
This component gives you independent color customization for each style. Customize Glass colors without affecting Solid or Floating — complete design freedom across every variant.
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
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
Framer plan with Locales enabled (Basic or higher). Works with both manual translations and Auto Translate.
For Glass and Floating styles, set the parent frame's Overflow to "Visible" so shadows display correctly.
Mikiko Niwa
